I have a timeline with little pins on it which when hovered over, slide up or down and then display a caption. When the mouse leaves, the caption should disappear and the pin moves back. This works, but with the code I am using, if the mouse moves too quickly, it doesn't detect the mouse leave. How can I fix this?
P.S, the only reason I am using mouse enter/leave is because I think I needed to use live() as my elements are added dynamically after the document loads.
$('#about-me .progress-bar .progress .notes li.personal').live('mouseenter',function(){
$(this).animate({
top:25
}, 200, function(){
$(this).find('.caption').stop(true, true).fadeIn(200);
});
}).live('mouseleave',function(){
$(this).find('.caption').stop(true, true).delay(200).fadeOut(200,function(){
$(this).parents('li').animate({
top:30
},200);
});
});
EDIT
Okay new plan!
Try this:
$('#about-me .progress-bar .progress .notes li.personal').live('mouseenter',function(){
$(this).animate({
top:25
}, 200, function(){
$(this).find('.caption').stop(true, true).fadeIn(200);
});
}).live('mouseleave',function(){
$(this).stop(true, true).find('.caption').stop(true, true).delay(200).fadeOut(200,function(){
$(this).parents('li').animate({
top:30
},200);
});
});
I didn't click that you are running animations on two separate objects! Feeling more confident about this one!
I've seen this before. When you move the mouse fast enough, it just skips over to a new place and doesn't trigger the mouseleave action. here's my solution using just a little bit of jQuery. Basically, while you are hovering on the pin, you need to bind a listener to the window that looks for any mouse movement and checks that you are still hovering on the pin. I dont' think you'd want this listener running all the time, so I have it unbind itself.
$(".pin").live("mouseenter", function(event) { var pin = $(event.target); // show the caption pin.addClass("hovered"); $(window).bind("mousemove", function(event) { var target = $(event.target); if (!target.hasClass("hovered")) { // hide the caption $(".hovered").removeClass("hovered"); $(window).unbind("mousemove"); } } }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With