X

Последовательная анимация с помощью 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>
Категории: JavaScript
Тэги: jquery