Frage Der fadeOut-Callback wird ausgeführt, bevor die Animation abgeschlossen ist


Ich hatte den Eindruck, dass die css-Regeln in der unten beschriebenen Callback-Funktion erst ausgeführt würden, nachdem fadeOut beendet war. Das scheint nicht der Fall zu sein. Die Zeilen in der Callback-Funktion werden tatsächlich beim Klicken ausgeführt. Irgendwelche Ideen, wo ich falsch liege?

$('a.close_link, #lightbox').click(function(){  
    $('#lightbox, .lightbox_panel').fadeOut(300,function(){
        $('.instructor_video').css('left','150%');
        $('.instructor_bio').css('left','50%');
    });
    return false;
 });

5
2018-03-25 01:11


Ursprung


Antworten:


Es ist wahrscheinlich, dass dein '#lightbox, .lightbox_panel' Selektor entspricht einem bereits verstecktes Element Beachten Sie, dass die .fadeOut() und der Rückruf wird aufgerufen jeder Element, das Selektor entspricht, müssen Sie ebenfalls erkennen, dass für bereits versteckte Elemente die complete Rückruf wird aufgerufen sofort (Die Arbeit, die es zu tun hat, ist ... abgeschlossen, oder?).

Um das "Instant Finish" hier zu eliminieren, können Sie einfach ausblenden :visible Elemente, die tatsächlich versteckt werden müssen, wie folgt:

$('#lightbox:visible, .lightbox_panel:visible').fadeOut(300,function(){
    $('.instructor_video').css('left','150%');
    $('.instructor_bio').css('left','50%');
});

Oder Sie können die gleichen Elemente ein bisschen anders mit einem .filter() ruf an, so:

$('#lightbox, .lightbox_panel').filter(':visible')

14
2018-03-25 03:06



Der vollständige Rückruf, der an fadeOut übergeben wird, wird für jedes Element, das animiert ist, einmal ausgeführt, wenn dieses Element fertig animiert ist. Also wenn du #lightbox, .lightbox_panel selector stimmt mit mehr als einem Element überein, Ihr Callback wird mehr als einmal aufgerufen.

Wenn Sie warten möchten, bis alle fertig sind, können Sie Folgendes tun:

var items = $('#lightbox, .lightbox_panel');
var count = items.length;
items.fadeOut(300, function() {
    if (--count > 0) return;
    $('.instructor_video').css('left','150%');
    $('.instructor_bio').css('left','50%');
});

2
2018-03-25 01:50