Обратные вызовы функций jQuery и время анимации - PullRequest
Новая
       27

Обратные вызовы функций jQuery и время анимации

1 голос
/ 05 августа 2010

Я бы хотел, чтобы DIV постепенно исчезал после исчезновения другого. Поскольку один DIV находится внутри другого, мне нужно, чтобы родительский DIV полностью исчезал (очищая любой другой контент, который мог бы отображаться), прежде чем затем исчезал дочерний DIV. Я попытался использовать функцию обратного вызова jQuery в своем коде ниже, чтобы нет выгода. 

$('#viewer a').click(function(e) {
    e.preventDefault();
    $('#content > *').fadeOut(500, function(){
        $('#kiosk').fadeIn(250);
    });
});

DIVs являются скачкообразными, и очевидно, что сценарий не ожидает завершения анимации, прежде чем начнется появление других DIV. Почему это?

Примечание: : я знаю, что мог бы связать .delay () или что-то в этом роде, но я бы не стал тратить на полсекунды, когда есть функция обратного вызова для этой цели!

1 Ответ

2 голосов
/ 05 августа 2010

Я предполагаю, что часть изменчивости связана с тем фактом, что вы замираете элементы, чьи предки в настоящее время исчезают.

Когда вы что-то исчезаете, оно автоматически исчезает и у его потомков, поэтому вам следуетвероятно, сделайте это вместо этого. 

$('#content').children().fadeOut(500, function(){
    $('#kiosk').fadeIn(250);
});

Теперь имейте в виду, что обратный вызов с .fadeIn() будет вызываться один раз для каждого элемента , который исчезает.Это также может быть проблемой.

Поскольку (предположительно) #kiosk является прямым потомком #content, вы можете просто напрямую связать fadeIn() в конце.Нет .delay() необходимо.

Попробуйте: http://jsfiddle.net/rrM28/

$('#content').children().fadeOut(500).filter('#kiosk').fadeIn(250);

РЕДАКТИРОВАТЬ: Из вашего обновленного примерав комментарии fadeIn() запускается немедленно, потому что #kiosk изначально скрыт, поэтому анимация сразу завершается, и цепочка продолжается.

Решение состоит в том, чтобы разместить .fadeIn()в анимации .queue(), так что он будет работать только после завершения fadeOut().

Попробуйте: http://jsfiddle.net/rrM28/4

$('#viewer a').click(function(e) {
    e.preventDefault();
           // Don't fadeOut the #kiosk
    $('#content').children(':not(#kiosk)').fadeOut(500)
           // Place the fadeIn of #kiosk in the next step of the animation queue
        .queue(function() {
            $(this).siblings('#kiosk').fadeIn(250).dequeue();
        });
});
...