在 mouseenter/mouseleave 上淡入/淡出，停止队列答案

【问题标题】：Fade in/out on mouseenter/mouseleave, stop queue在 mouseenter/mouseleave 上淡入/淡出，停止队列
【发布时间】：2015-06-18 00:10:31
【问题描述】：

这是我用来使某些图像在悬停时更改其 src 的 sn-p。

$(".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/

【问题讨论】：

SVG 图标和一点 CSS 可以为您省去很多麻烦。
好像是这个问题：stackoverflow.com/questions/2805906/jquery-stop-fadein-fadeout

标签： javascript jquery

【解决方案1】：

使用stop(true, true)（清队列？真，跳到最后？真）

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

【讨论】：

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

【讨论】：