javascript - 由于过多的事件，jQuery 动画表现异常？

Question

我的网站上有一个画廊。每张图片都是一个 <div>它有一个背景图像。溢出是隐藏的，我隐藏了一个标题 div使用 margin 。然后，我使用以下 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);
});

当我将鼠标移入和移出太快时，奇怪的事情开始发生。标题保持半褪色，或者标题完全停止出现。

问题可以看这个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