Jquery: wait a function to complete

Question

My problem:
I've got several (tell 10) elements. Hovering every one of them executes some function with animation. I do want to make so, that if a function (and animation) for one of the elements is running, hovering some other elements does not execute the function.

For example: I've hovered an element 2. Animations starts. As animation lasts, i hover elements 3, 4 and 5. The mouse cursor stays at 5.

What do I need, that when the animation for element 2 is over, and the cursor stays over 5, the animation for five starts automatically.

I've made it so:

var blocked = 0; 
 $(".my_element").live('hover',function(){
 if(blocked == 0){
 blocked = 1;
 $(this).find('.content').animate({left:"-=100px"}, function() {
 blocked = 0;
 });
 
 }, function(){
});

But after the function is complete, the next function does not start until I wiggle the mouse.

• hafichuk: When the subsequent events get triggered, your if statement returns false then the execution of the function ends. Take a look at changing your if(blocked == 0) to a while loop (with a sleep in the loop).
• Fosco: You would have to create a queue... When you hover, you add to the queue and trigger the animation. If the animation is blocked (already running) then it doesn't trigger again. When an animation completes, it runs the next in the queue (or unblocks if none left.) I don't feel like writing all the code for you, but perhaps this gives you a good idea.
• Kotanet: the solution with queue is interesting... but how can it be implemented... )
• Frédéric Hamidi: @Sobakinet, you seem to be animating all the .content elements every time the mouse enters any .my_element element. Is this by design, or is there a $(this).find(".content") or $(".content", this) in your actual code? (Maybe I'm misunderstanding your question, but you do say the animation for five, so I'm not sure...)
• Kotanet: no, i'm animating $(this).find('.content'), sorry

Answer 1

I think your code is pretty ok, but at the moment the animation stops you'd like to throw an event on the currently hovered element. That should trigger the animation again. And I guess you'd like to exclude the previously animated element too.

Something like this:

var blocked, lastHovered, previous;
$(".my_element").live('hover', function(){
 lastHovered = this;
 if (!blocked && this != previous){
 blocked = true;
 previous = this;
 $('.content').animate({left:"-=100px"}, 1000, function() {
 blocked = false; 
 if (lastHovered) {
 $(lastHovered).trigger("mouseenter");
 }
 });
 }
 }, function() {
 lastHovered = false;
 });

• Frédéric Hamidi: There is no :hover selector in jQuery core. Are you using a plugin to provide that feature?
• Johan: Good comment, didn't think of that. You could cache the last element for which the live-function was triggered, but that might not be the best solution.