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

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

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

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

Ответы

Ответ 1

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

Изменить: вы проверили плагин аккордеона (если это то, что вы пытаетесь сделать)?

Ответ 2

Вы должны его цепью

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

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

// etc

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

Ответ 3

Пример с чистым чистом и с задержкой между анимацией:

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

Ответ 4

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

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

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

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

Есть 15 дней этих учебных пособий, и они являются хорошим ресурсом. Наслаждайтесь!

Ответ 8

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

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