Завершите одну анимацию, затем запустите другую

Question

У меня есть два элемента div и две отдельные ссылки, которые запускают slideDown и slideUp для элементов div.

Когда один из блоков скользит вниз, и я щелкаю по другому, я скрываю первый элемент div (slideUp), а затем открываю другой элемент div (slideDown), но в данный момент это похоже на скольжение одного блока, другие, в то же время, скользят вверх.

Есть ли способ, который заставил бы jQuery подождать, чтобы закончить скольжение одного делителя и только потом начать сдвигать другой?

Answer 1

$('#Div1').slideDown('fast', function(){
    $('#Div2').slideUp('fast');
});

Редактировать: Вы проверили плагин для аккордеона (если вы пытаетесь это сделать)?

Answer 2

Пример немного чище и с задержкой между анимациями:

$("#elem").fadeIn(1000).delay(2000).fadeOut(1000);

Answer 3

Тебе нужно это приковать

function animationStep1()
{
   $('#yourDiv1').slideUp('normal', animationStep2);
}

function animationStep2()
{
   $('#yourDiv2').slideDown('normal', animationStep3);
}

// etc

Конечно, вы можете оживить это с помощью рекурсивных функций, массивов, содержащих очереди анимации и т. Д., В соответствии с вашими потребностями.

Answer 4

Вы можете использовать обратный вызов для запуска следующего эффекта, когда первый будет сделан:

$("#element1").slideUp(
    "slow", 
    function(){
        $("#element2").slideDown("slow");
    }
);

В этом примере функция, определенная как второй аргумент метода slideUp, вызывается после завершения анимации slideUp.

См. Документацию: http://docs.jquery.com/Effects/slideUp

Answer 5

пример этого можно увидеть в JQuery для начинающих - День 2

Существует 15 дней этих уроков, и они являются хорошим ресурсом. Наслаждайтесь!

Answer 6

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

$(this).slideDown( speed, function(){
    $(this).slideUp();
});

Answer 7

$("#thisDiv").slideUp("slow", function() {
    // This function is called when the slideUp is done animating
    $(this).doNextThing();
});

Answer 8

Большинство функций jquery имеют параметр обратного вызова, в него можно просто передать функцию.