0

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');
  • The above freezes the script when initiating hover over a sentence.

*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();
Improve this question

1 Answer 1

Reset to default
3

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.

Improve this answer
5
  • thanks nifty, I saw :animated on some other posts, so I guess I'll try implementing it. Edit: I need something like: If this.previous(':animated')... I can't seem to find out where to place this logic. All of my helper methods deal with fading in the *next image
    – Ben Sewards
    Commented Apr 5, 2012 at 15:32
  • There is also a flaw in this call because if $(this) isn't done animating, then it will skip over the if statement and not proceed with fading out the current image in the stack. I need more of a 'when this is done..' process, so that the next hover will execute when the previous is done.
    – Ben Sewards
    Commented Apr 5, 2012 at 15:53
  • Hm, could you setup a fiddle?
    – Andreas Wong
    Commented Apr 5, 2012 at 15:56
  • Have you tried putting that condition in a while loop and calling the second animation after the while loop exits? The while loop could be left empty (essentially busy-waiting) or could contain something to run while you wait
    – Zachary Kniebel
    Commented Sep 27, 2012 at 12:10
  • to past me: use promise() and done(), so that helper methods can be set up and called inside the done event.
    – Ben Sewards
    Commented Sep 1, 2015 at 18:58

Not the answer you're looking for? Browse other questions tagged or ask your own question.