アニメーションのjQueryオーバーラッピング問題

Question

問題は全体的に私が修正したヘッダーがあり、それに応じて移動する必要のあるdivがあることです。 3〜4回のように本当に速くクリックするとアニメーションがうまくいけなくなり、内容の中に「アンダー」のdivが表示されてしまうという問題があります。アニメーションやスライドの前にストップを使用します。私はキューなどを使用してみました..役に立たない。

$(".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/

ここで問題を表示jsfiddleです。ヘッダに本当に速いし、「これ1は、コンテンツ内に表示されます」の下でなければならない数回クリックしてみてください要素が既にアニメーション化されているときanimate()を呼び出す

Answer 1

を、あなたはありません持っていますクラス.lolとアイテム - 第二に、第三stop(true, true)

にごstop()通話を変更.under

にそれを変更、私はTAKうあなたのアニメーションは、completed機能のうち.underを呼び出し、最初のアニメーションと並行して呼び出します。

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

Answer 2

避けてください：まず

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