Question

I have 3 big boxes menu.When i move the mouse over 1 box i change the background and works but if move quick the mouse the background doesnt return to the original state.
I think the problem can be the speed of animation.If i use “fast” instead of “slow” in the speed for animation it works but the effect is too fast.

You can better see the problem here

i’m using this code for each box:

   $('#box-orange').hover( function(){        
      $(this).animate({ backgroundColor: "#E9902C" }, "slow");
   },
   function(){  
        $(this).css('background', 'none');
        $('#home-boxes').css('background-image', 'url(http://dev.thepixellary.es/resources/main_boxes_home.png)');
   });

   $('#box-pink').hover( function(){          
      $(this).animate({ backgroundColor: "#DD2D77" }, "slow");
   },
   function(){           
        $(this).css('background', 'none');
        $('#home-boxes').css('background-image', 'url(http://dev.thepixellary.es/resources/main_boxes_home.png)');
   });

   $('#box-blue').hover( function(){          
      $(this).animate({ backgroundColor: "#29A8DC" }, "slow");
   },
   function(){           
        $(this).css('background', 'none');
        $('#home-boxes').css('background-image', 'url(http://dev.thepixellary.es/resources/main_boxes_home.png)');
   });

Is there a way to make the boxes dont get messed up?

Answer 1

See my edit for a fix.

I’ve included a jQuery Colour plugin for smoother colour animations, then on mouseout changed the background colour to transparent, rather than changing the background to none.

The real problem was that if you hovered over the element and then left the element before the animation was finished, the mouseon animation is still running and so the mouseout event of removing the background doesn’t become permanent. To remedy this, simply add .stop() to the element being animated.