CODEWITHSUNDEEP
javascriptjqueryfade
Erwin van Ekeren
Erwin van Ekeren

Reputation: 730

stop executing javascript till full cycle

I made this script to fadeout and fadein (fadeTo) a div when I hover another div, it's almost working perfect but when I quickly hover in and out the div the script keeps looping until it reaches the times I hovered it.

Is it possible to stop (timeout?) the fadeOut/FadeIn effect till the loop is completed? So it stops repeating with a quick hover in and out but that the script works again when the loop is finished

jsFiddle: (quickly hover in and out the red part a few times, you'll notice the text keeps going)
http://jsfiddle.net/v69Jk/

$(function () {
$('.one').hover(function () {
    $('.show').fadeTo(600, 0);
},

function () {
    $('.show').fadeTo(600, 1);
});
});

Upvotes: 1

Views: 67

Answers (1)

Tony Dinh
Tony Dinh

Reputation: 6726

Solution 1: cancel the previous animation:

$(function () {
    $('.one').hover(function () {
        $('.show').stop().fadeTo(600, 0);
    },

    function () {
        $('.show').stop().fadeTo(600, 1);
    });
});

Demo

Solution 2: stop event when the animation is not done yet (as you wanted, but this might not work properly because of the hover function)

$(function () {
    $('.one').hover(function () {
        if (!$('.show').is(':animated')) {
            $('.show').fadeTo(600, 0);
        }
    },

    function () {
        if (!$('.show').is(':animated')) {
            $('.show').fadeTo(600, 1);
        }
    });
});

Demo

Upvotes: 3

Related Questions