Как зациклить анимацию jquery для перемещения элемента div

Question

Как зациклить анимацию jquery для перемещения элемента div

0

У меня есть следующий сценарий jquery для перемещения двух элементов div в одну сторону, а затем обратно:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

$(document).ready(function(){
$('#left').animate({top:"0%"},15000);
$('#right').animate({top:"-126%"},15000);
$('#left').animate({top:"-127%"},15000);
$('#right').animate({top:"0%"},15000);
});

То, что я хочу добиться, - повторить повторный цикл анимации в бесконечном цикле. Может ли кто-нибудь предложить, как я могу это достичь, пожалуйста?

Sam Friday Welch 15 дек. 2013, в 14:22

Источник

0

Вы пробовали эти решения? stackoverflow.com/questions/4713477/...
Vassilis Barzokas 15 дек. 2013, в 12:47

Теги:

jquery

loops

jquery-animate

2 ответа

Ещё вопросы

Вы пробовали эти решения? stackoverflow.com/questions/4713477/...

ramchauhan · Answer 1 · 2013-12-15T16-05-00.000Z

Here is the working example of the dynamic animation

$(document).ready(function(){
first();
function first(){   
 $(".left").animate({
     "left": "-=100px" 
 }, 3000, function(){
     $(".left").css("left", "100px");
 });

 $(".right").animate({
     "left": "0px"
  }, 3000, function(){
      second();
  });
};
function second(){
    $(".right").animate({
        "left": "-=100px"
    }, 3000, function(){
        $(".right").css("left", "100px");
    });

    $(".left").animate({
      "left": "0px"
    }, 3000, function(){
        first();
    });

  };

});

Вы можете просто положить верх над дворцом слева в css и js. http://jsfiddle.net/LPCE2/190/

Alessandro Minoccheri · Answer 2 · 2013-12-15T11-14-00.000Z

с setTimeOut() вы можете повторить код, последнее значение - это время после повторения кода.
Вы можете использовать ClearTimeout() чтобы очистить ранее сохраненные значения таймера.
попробуй это:

$(document).ready(function(){
    setTimeout(function() {
         $('#left').animate({top:"0%"},15000);
         $('#right').animate({top:"-126%"},15000);
         $('#left').animate({top:"-127%"},15000);
         $('#right').animate({top:"0%"},15000); 
    }, 0);
});

Привет, Алессандро, спасибо за ответ, однако, похоже, что это не работает, он все равно запускает блок анимации только один раз?