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