Search jQuery

jQuery Forum

Wait until mouseenter animation finishes?

in Using jQuery • 8 years ago

I have a perfectly working pair of animations on mouseenter and mouseleave.

The problem is on mouseenter, the hovered image moves away the pointer and the mouseleave event triggers, stuttering the image several times until the user re-positions the pointer where he guesses the image will land. Chasing the motion.

I tried stopping or not the current animation when the other event triggers

I tried unbinding and re-binding the other event only AFTER the current event's animation finishes…

The closest I got is the mouseleave waits until the mouseenter animation finishes… fine so far. No stuttering. BUT if you leave wile the mouseenter animation finishes, the mouseleave won't trigger because you are not "leaving" the image, and the event doesn't trigger because you "left" or "you are out".

So, again: if you are not there to chase the image and to be there there when the mouseenter animation finishes, you CAN'T be there to mouseleave it.

Mouseleave doesn't fire like a "the mouse moved and is not over the image".

I nead a way to DELAY the mouseleave "detection", not the "animation".

I need something getting aware of the past mouseleave, or awakening the detection even if I'm not moving the mouse.

The right event would be "if the mouse IS out NOW, regardless of it BEING leaving now or before"

Have you stumbled upon this scenario?

Replies(10)

jakecigar

Re: Wait until mouseenter animation finishes?

8 years ago

Moving an element with which you use hover(or mouseenter/mouseleave is always going to cause problems!

Depending on the HTML, you can often use hover with a parent element. Move the child, and you are still over the parent until the mouse moves off the parent, where you can then move back the child.

This method "delays" without causing headaches.

Could you share your HTML?

JΛ̊KE

applxperi..

Re: Wait until mouseenter animation finishes?

8 years ago

That won't work for my example.

The images rotate like a chinese paper fan, and i really need them to be precisely click-able. Extending the click area hovering its parent is the way it was before, but prevented me to click the photo behind.

The html is irrelevant. I'd change it the way I need it, and right now it's perfect. (I manage the center of rotation with css, not calculated js, so it needs to be that way)

I hoped there's some other function other than mouseenter/mouseleave but all of them are shorthands for the same behavior.

I'm exploring to trigger secondary events instead, which was trying to avoid.

I'll keep you posted.

jakecigar

Re: Wait until mouseenter animation finishes?

8 years ago

This works nicely for me. Is this close enough for you?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
$('#inner').mouseenter(function(){
$('#inner').stop(true,true).animate({left:300},'slow')
return false
}).click(function(){
$(this).toggleClass('clicked')
})
$('#outer').mouseleave(function(){
$('#inner').stop(true,true).animate({left:0},'slow')
return false
})
})
</script>
<title>Untitled</title>
<style type="text/css">
#outer
{
background-color: green;
width: 500px;
height: 100px;
}
#inner
{
background-color: yellow;
width: 200px;
height: 100px;
position: relative;
}
.clicked { background-color: red !important;}
</style>
</head>
<body>
Hello
<div id="outer">
<div id="inner">
JΛ̊KE
</div>
</div>
!
</body>
</html>

JΛ̊KE

applxperi..

Not good example

8 years ago

Thanks Jake for your sample.

No, it doesn't apply. In order to apply you should fill the green bar with other yellow rectangles, and then you'd have my same problem. I NEED the out effect to work as soon as you leave the yellow square. Most importantly inside the green box, where the other yellow boxes are.

I realized two things:

1) I was wrong when said the mouseleave not being catched if not done in that precise moment. That's exactly as it is and the cause of my problem

2) If I made the mouseleave animation not triggering until the element is re-hovered and re-mouseleave again, all the pictures rollovered would remain open.

I examined the behavior as if the images were people (best way to understand objects) and what I need is them to wait from the moment I touched them until I actually get to grab them. And the only way for them to know that is by WATCHING me whether I'm getting closer to grab them or just passing by.

So instead of a delay, which would slow down the reaction, I will add what computer menues do: quit waiting by proximity: If I'm getting closer to the image, it should be wait open until I get there. If I'm getting even 1px further away they should quit and close.

I'll post the code when I finish it.

Thanks.

applxperi..

Re: Wait until mouseenter animation finishes?

8 years ago

I've been trying to make the mouseentered image to "figure out" whether the pointer is approaching or not so it can wait in the hovered state a second, to prevent the rotating image moving away the pointer stuttering the mounseenter-leave-enter effect, without affecting the quick hover-out reaction if the pointer is just passing-by.

So far I came out with this solution, and even removing the click events and re-adding them after the hover animation finishes, but there's always a point in which the image remains "hovered" not closing, and the code became far from simple.

I think there's a right point to put the timer at for it to work, but I can find it.

http://socialblogsitewebdesign.com/wordpress_plugins/portfolio

Kind of works, but not neat yet.

One of the issues is the images were negativaly shift to change the rotation point, so when the image gets straight on hover I also "move" them to compensate the off-center rotation and make it look like it's rotating from the center. That motion makes the "proximity" not perfect.

I didn't use -webkit-transform-origin I'd like to make it more compatible some day and I didn't find that property in jQuery.

I'd appreciate comments on that script code :) (Darkroom.js)

charlietfl

Re: Wait until mouseenter animation finishes?

8 years ago

check out hoverIntent plugin, is designed for your issue

applxperi..

Re: check out hoverIntent plugin

8 years ago

Thanks!

This is not exactly what I wanted, since I want to KEEP the quick reaction of the mouse pass-by… but it's a good start.

If anyone knows a specific combination of the points in which the delay should be added, what should delay, and when/who should clear it, I'd appreciate the input. I'm sure it's just a matter of combinations of the same thing.

charlietfl

Re: Wait until mouseenter animation finishes?

8 years ago

plugin has configurable options

applxperi..

Re: Wait until mouseenter animation finishes?

8 years ago

Yes, I'll check it out in a few, but I think the same delay I need to wait before to prevent prematurely triggering the mouseleave is the same that makes the initial hover unresponsive (slow)

applxperi..

Almost there.

8 years ago

UPDATE:
The way I have it is not that bad.

It runs smooth enough but I was testing only one picture.

They are rotated in different directions for horizontal or vertical photos, and only the vertical's motion sucks.

The others are good enough.

Top Reply

Response title

Attachments

jQuery Forum

Wait until mouseenter animation finishes?

Replies(10)

Re: Wait until mouseenter animation finishes?

Re: Wait until mouseenter animation finishes?

Re: Wait until mouseenter animation finishes?

Not good example

Re: Wait until mouseenter animation finishes?

Re: Wait until mouseenter animation finishes?

Re: check out hoverIntent plugin

Re: Wait until mouseenter animation finishes?

Re: Wait until mouseenter animation finishes?

Almost there.

Statistics

Tags

Actions