не получается зациклить анимацию на jquery

Тема в разделе "JavaScript", создана пользователем fafee, 8 окт 2011.

Модераторы: ZiX
  1. fafee

    fafee Постоялец

    Регистр.:
    4 окт 2008
    Сообщения:
    92
    Симпатии:
    0
    не получается зациклить функцию, может быть в jquery есть какие-то специальные способы вроде loop или тп?
    для примера - кусочек простого кода - зеленый блок появляется и через некоторое время исчезает.
    HTML:
    
    <style>
    #green {
    width:100px;
    height:100px; 
    background-color:#006600;
    display:none;
    }
    </style>
    <script src="jquery.js"></script> 
    <script type="text/javascript">
    for (i = 0; i < 5; i++) {
    $("#green").fadeIn(1000);
    setTimeout(
    function() 
          { 
               $("#green").fadeOut(1000);
          }, 1000);	
    }
    </script>
    <div id="green"></div>
    
    цикл отрабатывает вместо пяти, всего один раз.
    как сделать чтобы отработал пять раз или бесконечно?

    не важно средствами js или jquery

    спасибо
     
  2. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    можно просто
    Код:
    $("#green").fadeIn(1000).fadeOut(1000).fadeIn(1000).fadeOut(1000);
    
    Или использовать callback для функции fadeOut, и запускать опять fadeIn.

    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Repeat</title>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script language="javascript" type="text/javascript">
        function fade(block_id, time, itr){
            //заканчиваем
            if(itr<=0)return false;
            //делаем fadeIn и fadeOut
            $(block_id).fadeIn(time).fadeOut(time, function() {
                //минусуем счётчик и запускаем опять себя
                fade(block_id, time, itr-1);
            });
        }
        
        $(document).ready(function(){
            //fadeIn+fadeOut 5 раз
            fade("#green", 300, 5);
        });
        </script>
    
    <style>
    #green {
        width:100px;
        height:100px; 
        background-color:#006600;
        display:none;
    }
    </style>
    
    </head>
    
    <body>
        <div id="green"></div>
    </body>
    </html>
    
    
     
  3. zzallexx

    zzallexx

    Регистр.:
    11 июн 2008
    Сообщения:
    1.036
    Симпатии:
    699
    HTML:
    <style>
    #green {
    width:100px;
    height:100px;
    background-color:#006600;
    display:none;
    }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <div id="green"></div>
    <script type="text/javascript">
    for (i = 0; i < 50; i++) {
    $("#green").fadeToggle(1000);
    }
    </script>