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

Question

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.

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

Answer 1

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);
    }
});

Answer 2

You can clear the animation queue as soon as you mouseenter and then create animations again. Much like this:

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