jQuery überlappendes Problem mit Animation

Question

Das ganze Problem ist, dass ich eine Kopfzeile habe, die behoben wird und es gibt ein div darunter, dass ich entsprechend bewegen muss. Obwohl es ein Problem gibt, wenn ich sehr schnell wie 3 oder 4 mal klicke, versaut eine der Animationen und ich habe am Ende das "unter" div im Inhalt. Ich benutze Stop, bevor ich animiere und gleite. Ich versuchte mit der Warteschlange und so .. Kein Erfolg.

$(".header").click(function() { 

    $header = $(this); 
    $content = $header.next(); 
    $content.stop().slideToggle(500, function() { 
    if(($('.lol').css('margin-top')) == '47px') 
{ 
$(".under").stop().animate({'margin-top': "100px"}, 500) 
} 
else 
{ 
$(".under").stop().animate({'margin-top': "47px"}, 500) 
} 
    }); 
}); 

https://jsfiddle.net/zddzvxLy/8/

Hier jsfiddle das Problem zu zeigen. Versuchen Sie, auf dem Header klicken ein paar Mal sehr schnell und ‚Das muss man sein, unter“ inside CONTENT erscheint

Answer 1

Zum einen haben Sie keine Artikel mit der Klasse .lol - die .under zu

Zweitens ändern, Ihre stop() Anrufen Drittens zu stop(true, true)

ändern, würde ich tak e deiner Animation Anruf für .under aus der completed Funktion und rufen Sie es parallel zu Ihrer ersten Animation.

https://jsfiddle.net/zddzvxLy/10/

Answer 2

Vermeiden animate() Aufruf, wenn das Element bereits animiert wird.

if ($('.content').is(':animated') === false) 
{ 
    // animate 
} 
else 
{ 
    return false; 
}