等待一个动画完成，然后再开始另一个动画

Question

我在页脚上有一个mouseenter动画，还有一个鼠标离开动画，它会稍微滑动一下，我遇到的问题是，如果您按鼠标进入，然后多次离开鼠标，动画就会反复播放并反复播放，即使该元素不再是良性的用过的。

我如何等待鼠标运行，然后才能识别鼠标离开。

许多thansk需要任何帮助

大卫

$(document).ready(function () {
$("footer").mouseenter(function () {
    $("footer").animate({ bottom: '+=62px' }, 500);
});


$("footer").mouseleave(function () {
    $("footer").animate({ bottom: '-=62px' }, 500);

});
});

Answer 1

尝试将stop()添加到animate函数中。 它将停止所选元素上当前正在运行的动画。

$("footer").mouseenter(function () {
  $("footer").stop().animate({ bottom: '+=62px' }, 500);
});

$("footer").mouseleave(function () {
  $("footer").stop().animate({ bottom: '-=62px' }, 500);
});