淡入/淡出mouseenter/mouseleave，停止队列 [英] Fade in/out on mouseenter/mouseleave, stop queue

问题描述

这是我用来使某些图像在悬停时更改其src的代码段.

This is the snippet I'm using to make some images change their src on hover.

$(".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);
    }
});

有一个问题，当您多次将鼠标移过时，动画会重复并且队列发疯..观看此视频:

There an issue, when you pass the mouse over multiple times, the animation is repeated and the queue goes crazy.. see this video: http://youtu.be/dTYhbcQM3tI How can I avoid that? I tried with .stop() but doesn't seem to be working properly.

这是基本的JSFIDDLE: http://jsfiddle.net/HpmN7/925/

Here's the base JSFIDDLE: http://jsfiddle.net/HpmN7/925/

推荐答案

使用stop(true, true)(清除队列?是，跳转到末尾?是)

use stop(true, true) (clear the queue? true, jump to the end? 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);
    }
});

这篇关于淡入/淡出mouseenter/mouseleave，停止队列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！