Question

这是我用来让一些图片在悬停时更改其src的片段。

$(".social").on({
    mouseenter: function () {
        $(this).data("original-src", $(this).attr("src"))
            .fadeOut(250, function () {
            $(this).attr("src", $(this).attr("data-src"));
        }).fadeIn(250);
    },
    mouseleave: function () {
        $(this).fadeOut(250, function () {
            $(this).attr("src", $(this).data("original-src"));
        }).fadeIn(250);
    }
});

出现问题，当您多次传递鼠标时，动画会重复，队列会变得疯狂..请参阅此视频：http://youtu.be/dTYhbcQM3tI 我怎么能避免这种情况？我试过.stop()，但似乎没有正常工作。

这是基础JSFIDDLE： http://jsfiddle.net/HpmN7/925/

Answer 1

使用keyboardHideEvent（清除队列？是的，跳到最后？是真的）

stop(true, true)

Answer 2

您可以在鼠标中心后立即清除动画队列，然后再次创建动画。很像这样：

$(".social").on({
    mouseenter: function () {
        $(this).finish();
        $(this).data("original-src", $(this).attr("src"))
            .fadeOut(250, function () {
            $(this).attr("src", $(this).attr("data-src"));
        }).fadeIn(250);
    },
    mouseleave: function () {
        $(this).fadeOut(250, function () {
            $(this).attr("src", $(this).data("original-src"));
        }).fadeIn(250);
    }
});

淡入/淡出mouseenter / mouseleave，停止队列

2 个答案: