jQuery 事件过多导致动画异常？

Question

我的网站上有一个画廊。每个图像都是一个 <div> ，其中有一个背景图像。溢出是隐藏的，我使用边距隐藏了标题 div。然后，当鼠标进入和离开图片时，我使用以下 jQuery 为字幕设置动画 <div>。

$(document).on("mouseenter", ".gallery-image", function(){
    $(this).children(".caption").dequeue();
    $(this).children(".caption").fadeIn({queue: false, duration: 500}).animate({marginTop: "350px"}, 500);
});
$(document).on("mouseleave", ".gallery-image", function(){
    $(this).children(".caption").dequeue();
    $(this).children(".caption").fadeOut({queue: false, duration: 500}).animate({marginTop: "400px"}, 500);
});

当我将鼠标移入和移出太快时，奇怪的事情开始发生。标题保持 half-faded，或者完全停止显示。

这个问题可以看JSFiddle.

为什么我会遇到这种意外行为？

Answer 1

使用.stop(true, true)停止动画的预排队

$(document).on("mouseenter", ".gallery-image", function(){
        $(this).children(".caption").stop(true,true).fadeIn({queue: false, duration: 500}).animate({marginTop: "350px"}, 500);
 });
    $(document).on("mouseleave", ".gallery-image", function(){
        $(this).children(".caption").stop(true,true).fadeOut({queue: false, duration: 500}).animate({marginTop: "400px"}, 500);
 });

Fiddle

jQuery 事件过多导致动画异常？

jQuery animation performing strangely due to excessive events?

javascript

css

jquery

animation

jquery-animate