Анимация на JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

//стартовые значения задержки между периодами и количеством периодов
var wRight = 0;
var wLeft = 0;
var wStep = 10;
var winTimeout = 50;
//var wObj = document.getElementById('test');
//тут перебираем нужный элемент и меняем ему постепено значение прозрачности
function wiOpen(pref) {
        prefix = pref;
        var wObj = document.getElementById(pref + '_dWin');
        wObj.style.display = 'block';
        if (wStep > 9) {
                if (pref == 'sec') document.getElementById('cat_dWin').style.display = 'none';
                else document.getElementById('sec_dWin').style.display = 'none';
        }
        if (wStep > 0) {
                 wStep--;
                 wLeft += 0.1;
                
                wObj.style.opacity = wLeft;
                //тут мы еще раз вызываем функцию в которой находимся. Она как бы вызывает сама себя пока переменная wStep больше 0.
               //второ параметр это задержка в милисекундах до вызова. Вверху мы определили эту переменную как 50 - значит одна 20 сек. 1/20
                setTimeout("wiOpen(prefix)", winTimeout);
        } else {
                wStep = 10;
                wLeft = 0;
        }
}