CODEWITHSUNDEEP
javascriptjqueryfunction
Blainer
Blainer

Reputation: 2702

interrupt fadeTo function

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

Upvotes: 2

Views: 211

Answers (4)

Korvin Szanto
Korvin Szanto

Reputation: 4501

You need to use jQuery's .stop function:

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

What this does is stops the current animations, and jumps to the final result before starting the next animation.

Upvotes: 1

Esailija
Esailija

Reputation: 140220

.hover( function() {
    $( this ).stop().fadeTo( 500, 1.0 );
}, function() {
    $( this ).stop().fadeTo( 1750, 0.1 );
});

Upvotes: 0

shadyabhi
shadyabhi

Reputation: 17234

If you call the stop method on the element it will stop all animations.

Upvotes: 0

bardiir
bardiir

Reputation: 14782

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.

Upvotes: 0

Related Questions