I have a piece of code that basically says: if you roll over this , then the other thing appears and if you roll out then it will disappear.
The problem is that if I take the mouse and roll over/out too many times then the elements appears/disappears too many times (because I have created a lot of events for it by mistake)
my code looks like this:
$('div.accordionContent').mouseenter(function()
{
$(this).find(".something").animate({left: 0}, 300)}).mouseleave(function() {
$(this).find(".something").animate({
left: -200}, 500);;
});
How do I tell it to avoid multiple hovering?
I use jQuery 1.4.3 if that helps..
I have a piece of code that basically says: if you roll over this , then the other thing appears and if you roll out then it will disappear.
The problem is that if I take the mouse and roll over/out too many times then the elements appears/disappears too many times (because I have created a lot of events for it by mistake)
my code looks like this:
$('div.accordionContent').mouseenter(function()
{
$(this).find(".something").animate({left: 0}, 300)}).mouseleave(function() {
$(this).find(".something").animate({
left: -200}, 500);;
});
How do I tell it to avoid multiple hovering?
I use jQuery 1.4.3 if that helps..
Share Improve this question edited Dec 12, 2011 at 9:00 Ronald Wildenberg 32.1k17 gold badges94 silver badges133 bronze badges asked Dec 12, 2011 at 8:59 AlonAlon 7,75820 gold badges64 silver badges100 bronze badges5 Answers
Reset to default 6Rather than avoiding multiple triggering, try stopping the animation before starting another.
$('div.accordionContent').mouseenter(function() {
$(this).find(".something").stop().animate(...)
});
The problem is you fire new events before the old ones have finished. To prevent this you could stop listening (remove the listeners) for future events until the current events have finished their tasks.
jQuery.animate has an option "queue". If you set that to false, I think the event won't trigger as much. I think =)
If you wanna do it the correct way, i suggest this
$('div.accordionContent').bind('mouseenter mouseleave', function(e){
var $something = $(this).find(".something");
if(e.type == 'mouseenter'){
$something.animate({left:0}, {queue:false, duration:300 });
} else {
$something.animate({left:-200}, {queue:false, duration:500 });
}
});
You can try this one:
$('div.accordionContent').mouseenter(function(){
var div = $(this);
clearTimeout(window.me);
window.me = setTimeout(function(){
div.find(".something").animate({left: 0}, 300)}).mouseleave(function(){
$(this).find(".something").animate({
left: -200}, 500);
});
},50);
});
The idea here is to cancel the current mouseenter if the 50 delay isn't reached yet.