1

I've made two hover effects with both jquery and css code here :

http://jsfiddle.net/UFSvN/3/

there is a difference between jquery hover and css hover. for jquery hover, if you move the mouse over the box for a very short moment and leave the box quickly, it will run mouse enter and mouse leave animation both and will finish them , while the mouse was not over the box after mouse-enter-animation ending...

but for css hover, if you hover the box, the hover effect will run the mouse-leave-animation if only you keep the mouse over the box until the mouse-over-animation ending/ is finished !!!

how can I make jquery hover like css hover ?! I don't wanna have the whole animation completely ran when I move my mouse over the box just for a melee second !

Improve this question

1 Answer 1

Reset to default
2

Use .stop() to stop currently running animations.

Example: http://jsfiddle.net/UFSvN/4/

In the fiddle, I passed in 'true' as an argument. This clears the animation queue. Do read the jQuery documentation; there are lots of other cool things it shows you how to do, like passing in a second argument to jump to the end of the animations.

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

thank, but what if I make some changes in my codes? like this : jsfiddle.net/UFSvN/9 then .stop(true) wont work for this case ..
@Pay4m What are you expecting it to do in that case... Playing the entire animation there seems like the most natural thing to me.
move the mouse 3 times over the jquery box and leave it quickly. then the animation will be ran 3 times continuously.. I don't want this to happen.. so I think the solution is to allow the animation if only the mouse is still over the box. and when it's out, stop the animation sequence..
@Pay4m Your new example is quite strange. Why are you using the .animate() method twice on the same element, at the same time, at two different speeds? I can only imagine that creates unpredictable behaviour.
Um.. No.. Animating twice at the same time is not the same as easing. Why does it have to be exactly precisely 100% the absolute same? It's going to look/feel ever so slightly different on different browsers/machines anyway.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.