Main > JavaScript > Последовательная анимация с помощью JQuery

Последовательная анимация с помощью JQuery

13.02.2012 0 comments » Views: 2,799

Jquery

Пример смены блоков по таймеру..

Так же доступен на jsfiddle: тут


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
      
    <html xmlns="http://www.w3.org/1999/xhtml">  
      
    <head>  
      <title></title>  
      <script src="https://code.jquery.com/jquery-latest.js"></script>  
    </head>  
      
    <body>  
    <script>  
      
        var i=1;  
      
        function show(id) {  
            $('.obj:visible').fadeOut('500',function () {  
                $($('.obj')[id-1]).fadeIn('500');  
            });  
        }  
      
        function next(start) {  
            if (!start) i++;  
            if (i>$('.obj').length) i=1;  
            show(i);  
            timeoutID = setTimeout(function(){next(0);}, 1000);  
        }  
      
        $(document).ready(next(1));  
      
    </script>  
      
    <div class="obj">1</div>  
    <div style="display:none;" class="obj">2</div>  
    <div style="display:none;" class="obj">3</div>  
      
    </body>  
      
    </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

</head>

<body>

var i=1;

function show(id) {

$('.obj:visible').fadeOut('500',function () {

$($('.obj')[id-1]).fadeIn('500');

});

}

function next(start) {

if (!start) i++;

if (i>$('.obj').length) i=1;

show(i);

timeoutID = setTimeout(function(){next(0);}, 1000);

}

$(document).ready(next(1));

</script>

</body>

</html>

Author: Vitaly Orlov | Rating: 4/5 | Tags: jquery

Последовательная анимация с помощью JQuery

Leave a Reply Cancel reply