动画

Question

整个问题是我有一个固定的标题，并且我需要相应地移动它下面的div。虽然有一个问题，如果我真的快速点击3或4次，其中一个动画混乱，我最终得到了＆＃39;＆＃39; 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/

这里有一个显示问题的方法。尝试快速点击标题几次＆＃39;这个必须在＆＃34;将出现在CONTENT内。

Answer 1

首先，您没有关于课程.lol的项目 - 将其更改为.under

其次，将stop()来电更改为stop(true, true)

第三，我会从.under函数中调出completed的动画调用，并将其与第一个动画并行调用。

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

Answer 2

当元素已经被动画化时，避免调用animate()：

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