Проблема с перекрытием 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, чтобы показать проблему. Попробуйте нажать на заголовок несколько раз очень быстро и «Это один должен быть в состоянии» будет появляться внутри СОДЕРЖАНИЯ

Answer 1

Во-первых, у вас есть нет элемент с классом .lol - изменить что .under

Во-вторых, изменить stop() вызовы stop(true, true)

в-третьих, я бы Tak e ваш анимационный вызов для .under из функции completed и вызовите его параллельно с вашей первой анимацией.

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

Answer 2

Избегайте вызова animate(), когда элемент уже анимированный:.

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