CODEWITHSUNDEEP
javascriptjqueryfunction
Kotanet
Kotanet

Reputation: 573

Jquery: wait a function to complete

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.

Upvotes: 2

Views: 1079

Answers (1)

Johan
Johan

Reputation: 3212

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

Upvotes: 3

Related Questions