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

【问题标题】：jQuery animation performing strangely due to excessive events?由于过多的事件，jQuery 动画表现异常？
【发布时间】：2015-10-23 01:56:32
【问题描述】：

我的网站上有一个画廊。每个图像都是一个<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);
});

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

这个问题可以看这个JSFiddle。

为什么会出现这种意外行为？

【问题讨论】：

添加了指向 JSFiddle 的链接。

标签： javascript jquery css animation jquery-animate

【解决方案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

【讨论】：