CODEWITHSUNDEEP
jqueryhtmlcssanimation
Ben Sewards
Ben Sewards

Reputation: 2661

stopping next hover animation from happening until current is complete

I have a set of stacked images and a set of sentences to the right of the images. My program works like this: when you hover over a sentence, the corresponding image fades in to the front of the stack and the previous image fades out. I have a hover function that uses onmouseenter and onmouseleave, and in both, helper functions are called to perform the correct animation process.

The problem I am having is if you hover over another sentence when the animation is being performed on the first one, it breaks. I researched stop(true, true) and possibly creating a callback function once animation is complete on current hover over, but these aren't effect fixes.

Does anyone know of any ways to freeze a future animation until the current one's progress is complete? I shouldn't have to add to an array queue, but maybe I could set a boolean var inside the fade call to check the progress of the animation.

Possible solution: In my onmouseleave state of onHover(), i call setTimeOut with a delay of 300ms to check and see if the default img has an active class, and if not, i animate it in (which means that when the user leaves a sentence, after 300ms, the default image fades in). I think I can add to this function to delay the animation of the next hover over, if the user hovers over any other sentence.

What I've tried

//get rid of intitial page load animation classes
$('#pics img').not($currentCase).not('.active').removeClass('first next-in-line last-in-line');

do {
    $currentCase
    //before this image is faded in, we need to add the next-in-line class so it is stacked right below the top image
        .addClass('next-in-line')
        .fadeIn(fadeSpeed, function () {
            ($(this).removeClass('next-in-line'))
        });
} while ($('#pics img.active').is(':animated'));

$currentCase.addClass('active');

*MY answer:*For those who may have ran into a similar problem, in the call back function of fadeIn(), I used the below code for a fix:

$('.active').removeClass('active').hide();

Upvotes: 0

Views: 1698

Answers (1)

Andreas Wong
Andreas Wong

Reputation: 60594

You can check whether an image is still being animated using

if($(this).is(':animated'))

The general idea is to check whether something is still being animated, if it is then don't start another animation.

Upvotes: 3

Related Questions