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.

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