Как создать петли в jQuery

Question

Мне нужно показать 2 div элементов, один за другим, в цикле.

HTML Текст Другой текст

jQuery

$('#1').animate({opacity:0},500)
    .animate({opacity:1},500)
    .delay(2000)
    .animate({opacity:0},500);

Что должно идтиздесь между?Итак, сначала мы запускаем анимацию для # 1 и только затем запускаем анимацию для # 1 DIV

$('#2').animate({opacity:0},500)
    .animate({opacity:1},500)
    .delay(2000)
    .animate({opacity:0},500);

И как сделать из этого бесконечный цикл?

Answer 1

Для бесконечного цикла вы можете поместить анимацию каждого элемента div в свою собственную функцию, а затем вызвать эту функцию из полного обратного вызова конца другой анимации.(Проще показать, чем объяснить :)http://jsfiddle.net/nnnnnn/HQ5ys/2/

Answer 2

Вы можете использовать обратный вызов animate(). Обратный вызов будет запущен после завершения анимации.

$('#one').animate({}, 'fast', function(){ 
    //Callback 
    $('#two').animate({ });
});

Answer 3

Для этого вы можете использовать функцию jQuery «когда-то».

$.when(
    function(){
        $('#1').animate({opacity:0},500)
            .animate({opacity:1},500)
        .delay(2000)
        .animate({opacity:0},500);})
.then(function(){
    $('#2').animate({opacity:0},500)
    .animate({opacity:1},500)
    .delay(2000)
    .animate({opacity:0},500);
});

Answer 4

Используйте полную функцию обратного вызова, например:

setInterval(function () {
$("#1").animate({opacity:0}, 500, function() {
  $("#2").animate({opacity:0},500);
}), 5000); //runs every 5 secs