Question

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

$(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

由于过多的事件，jQuery动画表现奇怪？

1 个答案: