JQuery hover problem

Question

Hello,

Im using jquery hover method to call a function as follows

$(<some_element>).hover(function(){animate("next",true);},function(){});

But,the animate function is called only when the mouse enters the element. I want it to keep getting called as long as the mouse is over the element also.

Any way to achieve this ?

Thank You.

Answer 1

You can use mouvemove but it won't work if the mouse just stay inactive over your element.

From the jQuery doc for the animate method:

.animate( properties, [ duration ], [ easing ], [ callback ] )

callback: A function to call once the animation is complete.

So i think you can have a callback that verufy if the mouse is still over your element and if so, call .animate("next",...) again.

Answer 2

Try this:

var interval_id;
$(<some_element>).hover(
    function(){
        // start interval
        interval_id = setInterval( function() {
            // called every 100ms as long as the elem is hovered
            animate("next",true);
        }, 100 );
    },
    function(){
        // stop interval
        clearInterval( interval_id );
    }
);

Answer 3

You can do this with no global variables, etc laying around:

$(<some_element>).hover(function(){
  $(this).data("anim",setInterval(function() { animate("next",true); }, 500));  
},function(){
  clearInterval($(this).data("anim"));
});

This approach works on multiple elements as well, since the interval is stored locally. Just change the 500 (half second) to be as often as you want to animate.