Question

Is there a way to interrupt the fadeTo animation on mouseover? For example: In the below code when someone hovers OFF “slider$controls” they fade to .1 opacity at 1750ms, but when you hover ON them they fade to 1 opacity at 500ms. If someone were to hover OFF of them and before the 1750ms was up they hovered back on them, slider$controls would not fade back to 1 opacity until the 1750ms was up which makes it appear unresponsive.

$(function () {
    var fadeDelay = 4000,
        // hide after 3 second delay
        timer, hideControls = function (slider) {
            clearTimeout(timer);
            setTimeout(function () {
                slider.$controls.hover(function () {
                $(this).fadeTo(500, 1.0);
                }, function () {
                $(this).fadeTo(1750, 0.1);
                });
            }, fadeDelay);
        };
});

Answer 1

You can use .stop() to clear animations from the queue/stop the current animation.

Best use it like this:

$(function () {
    var fadeDelay = 4000,
        // hide after 3 second delay
        timer, hideControls = function (slider) {
            clearTimeout(timer);
            setTimeout(function () {
                slider.$controls.hover(function () {
                $(this).stop(true,false).fadeTo(500, 1.0);
                }, function () {
                $(this).stop(true,false).fadeTo(1750, 0.1);
                });
            }, fadeDelay);
        };
});

This will clear the queue, so all animations are stopped and then start the animation from where the element has been stopped.