Looping Функция jQuery

У меня есть небольшая анимация, сделанная с помощью jQuery (панели поднимаются и опускаются). Но я не могу сделать это петлей. Таким образом, это будет продолжаться. Вот код до сих пор:.Looping Функция jQuery

$(document).ready(function() { 

    startAni(); 

}); 

function startAni() { 
    setTimeout(function() { 
     $('.ani .panels').animate({ 
      top: '-350px', 
     }, 2500, function() { 
      setTimeout(function() { 
       $('.ani .panels').animate({ 
        top: '0px', 
       }, 2500, function() { 
       }); 
      }, 1000); 
     }); 
    }, 1000); 


    //startAni(); 
}

Так он отлично работает один раз (панелей ДИВ идет вверх, остается там в течение 1 секунды, а затем возвращается вниз Как я могу изменить это в цикле я попытался назвать ту же функцию? внутри функции, но это просто убил:/

Благодаря

источник

2012-01-10 user995317

Используйте [setInterval] (http://www.w3schools.com/jsref/met_win_setinterval.asp). – Sjoerd

Этот пример работает:

http://jsbin.com/esaraj/4/edit#javascript,html,live

function startAni() { 
      $('.ani .panels').animate 
      (
      {top: '250px'}, 2500, function(){ 
setTimeout( 
       function() {               $('.ani .panels').animate 
(
{top: '0px'}, 2500, function() 
{ 
startAni(); 
} 
);},2500);});} 


      $(function() 
    { 

    startAni(); 

}

источник

2012-01-10 16:10:33 netadictos

Получил это с этим и некоторыми изменениями. Спасибо! – user995317

var time = 1000; //time between loops 
$(document).ready(function() { 

    var interval = setInterval('startAni()',time); 

});

источник

2012-01-10 15:30:42

Это ничего не делает ... хм. Может быть, я что-то упустил. – user995317

Вы включаете функцию startAni(), правильно? можете ли вы предоставить любую ссылку? –

вы должны использовать setInterval и переписать функцию как:

$(document).ready(function() { 

    //interval = 2500ms + 2500ms = sum of all animation steps 
    var interval = 5000; 
    var looping = setInterval(startAni, interval); 
    startAni(); //starts animation right away 
}); 

function startAni() { 
    $('.ani .panels').animate({ 
      top: '-350px', 
     }, 2500, function() { 
      $('.ani .panels').animate({ 
       top: '0px', 
      }, 2500); 
     } 
    }); 
}

изменения в оригинальных FUNC не было упомянуто в предыдущих ответах, так что я решил написать отдельный один

UPD: если у вас есть более чем один пункт в ".ani .panels" вместо него вы должны идти с чем-то вроде:

$(document).ready(function() { 
    //interval = 2500ms + 2500ms = sum of all animation steps 
    var interval = 5000; 
    var looping = setInterval(startAni, interval); 
    startAni(); 
}); 

function startAni() { 

    var animating = false; 
    $('.ani .panels').animate({ 
      top: '+50px', 
     }, 2500, function() { 
      // the callback tries to run for every item in '.ani .panels' 
      // we need it to run only once 
      if(!animating){ 
       animating = true; 
       $('.ani .panels').animate({ 
        top: '0px', 
       }, 2500, function() { 
        // reset flag for a single callback instance invocation 
        animating=false; 
       }); 
      } 
     } 
    );

}

the working fiddle

источник

2012-01-10 15:59:38 akoptsov

Они работают почти, но панели должны остановиться на секунду сверху и снизу. Следовательно, тайм-ауты на моем оригинале. – user995317

Здесь функция автоматического цикла с HTML кодом. Надеюсь, это может быть полезно для кого-то.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
position: relative; 
background-color: #abc; 
width: 40px; 
height: 40px; 
float: left; 
margin: 5px; 
} 
</style> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
<p><button id="go">Run »</button></p> 
<div class="block"></div> 
<script> 

function test() { 
$(".block").animate({left: "+=50", opacity: 1}, 500); 
    setTimeout(mycode, 2000); 
}; 
$("#go").click(function(){ 
test(); 
}); 
</script> 
</body> 
</html>

Fiddle: DEMO

источник

2013-02-19 13:01:32 Selvamani

Looping Функция jQuery

ответ

Смежные вопросы