Запуск анимации JQuery в последовательности

Question

Я пытаюсь запустить JQuery анимации в последовательности, но не кажется, чтобы заставить его работать ...

// Run this animation first hiding fading all divs but selected one 

if (divid!= '1') { $('#div1').animate({ 'opacity': 0 }, 500); } 
if (divid!= '2') { $('#div2').animate({ 'opacity': 0 }, 500); } 
if (divid!= '3') { $('#div3').animate({ 'opacity': 0 }, 500); } 
if (divid!= '4') { $('#div4').animate({ 'opacity': 0 }, 500); } 
if (divid!= '5') { $('#div5').animate({ 'opacity': 0 }, 500); } 

once all the above animations have finished do the next lot... 

if (cargroup != '1') { $('#div1').hide(500); } 
if (cargroup != '2') { $('#div2').hide(500); } 
if (cargroup != '3') { $('#div3').hide(500); } 
if (cargroup != '4') { $('#div4').hide(500); } 
if (cargroup != '5') { $('#div5').hide(500); } 

и так далее ...

Answer 1

Оберните второй блок в функция называется, позволяет сказать, hideDivs() и добавить эту функцию обратного вызова в последней строке первого блока, как это:

if (divid!= '5') { $('#div5').animate({ 'opacity': 0 }, 500, hideDivs); } 

EDIT: это то, что я имею в виду:

if (divid!= '1') { $('#div1').animate({ 'opacity': 0 }, 500); } 
if (divid!= '2') { $('#div2').animate({ 'opacity': 0 }, 500); } 
if (divid!= '3') { $('#div3').animate({ 'opacity': 0 }, 500); } 
if (divid!= '4') { $('#div4').animate({ 'opacity': 0 }, 500); } 
if (divid!= '5') { $('#div5').animate({ 'opacity': 0 }, 500, hideDivs); } 

function hideDivs() { 
    if (cargroup != '1') { $('#div1').hide(500); } 
    if (cargroup != '2') { $('#div2').hide(500); } 
    if (cargroup != '3') { $('#div3').hide(500); } 
    if (cargroup != '4') { $('#div4').hide(500); } 
    if (cargroup != '5') { $('#div5').hide(500); } 
} 

Также рассмотрите возможность реорганизации вашего кода, как предлагает сообщение Relic. Используя each, первый блок (без вашего условных) может выглядеть следующим образом, вместо:

$('#div1, #div2, #div3, #div4, #div5').each(function() { 
    if ($(this).attr('id') != 'div5') $(this).animate({ 'opacity': 0 }, 500); 
    else $(this).animate({ 'opacity': 0 }, 500, hideDivs);  
}); 

Answer 2

Установите queue свойство методы aninmate в true. Он будет анимироваться последовательно. Попробуйте это

if (divid!= '1') { $('#div1').animate({ 'opacity': 0 }, { queue: true, duration: 500 }); } 
if (divid!= '2') { $('#div2').animate({ 'opacity': 0 }, { queue: true, duration: 500 }); } 
if (divid!= '3') { $('#div3').animate({ 'opacity': 0 }, { queue: true, duration: 500 }); } 
if (divid!= '4') { $('#div4').animate({ 'opacity': 0 }, { queue: true, duration: 500 }); } 
if (divid!= '5') { $('#div5').animate({ 'opacity': 0 }, { queue: true, duration: 500 }); } 

Answer 3

Они не будут работать последовательно, если вы сделаете это. Все, что вы делаете, - это ожидание анимации и скрытие эффектов до тех пор, пока элемент управления не вернется к jQuery, что, вероятно, означает, что блоки просто скрываются. Вам нужно, чтобы каждая анимация передавала функцию обратного вызова, которая вызывается, когда анимация завершается, а затем ваша функция обратного вызова запускает следующую. См. Примеры и http://api.jquery.com/hide/.

Answer 4

У вас есть пара вариантов ... Попробуйте это сначала { queue: true, duration: 500 } вместо 500, а затем попробуйте немного очистить вашу логику до чего-то большего, как показано ниже.

У меня нет способа проверить это, но оно должно дать вам эту идею. И, честно говоря, я бы добавил класс ко всем тем divs, как «.togglers», а затем сделал что-то подобное. И поскольку они явно все divs .... попробуйте это

$(".togglers").each(function(){ 
    if(divid!=$(this).attr("id")){ 
     $(this).animate({ 'opacity': 0 }, 500); 
    } 
}); 
$(".togglers").each(function(){ 
    if(cargroup!=$(this).attr("id")){ 
     $(this).hide(500); 
    } 
});