Hover/mouseenter event triggers jQuery UI's 'animate' repetitively?

The reason for your problem is that you're moving the element so it is no longer under the mouse. Therefore obviously mouseleave() is triggered. You can avoid this by triggering the animation on hover of the a tag, but target the li with the animation.

See: jsfiddle.net/aN4g4/50.

The reason for your problem is that you're moving the element so it is no longer under the mouse. Therefore obviously mouseleave() is triggered. You can avoid this by triggering the animation on hover of the a tag, but target the li with the animation.

See: jsfiddle.net/aN4g4/50/ Here's your new js: $("nav a"). Mouseenter(function(){ var $li = $(this). Find('li'); $li.

Stop(true,true). Animate({bottom:"-50px"},"fast", function(){ $li. Css({'background':'orange','color':'#fff'}); }); $li.

Stop(true,true). Animate({bottom:"-0px"},"fast"); }). Mouseleave(function(){ var $li = $(this).

Find('li'); $li. Stop(true,true). Animate({bottom:"-50px"},"fast", function(){ $li.

Css({'background':'white','color':'#333'}); }); $li. Animate({bottom:"-0px"},"fast"); }); You may have noticed that the callback function which fires after the animation finished has been optimized a bit. You can pass multiple CSS properties in this way: .

Css({'prop1':'val1','prop2':val2'}) Also, I have optimized the code so you're not generating a lot of jQuery objects because that is slow. (notice the var $li line. ).

Perfect! Thank you so much. Also, thanks for optimizing those bits of code (Always good to pickup on best practices).

You, Sir, have made my day! – DeanHyde May 24 at 13:38.

Try to set yours li as position: relative; I just "paste" your code and set relative yours the result was a little funny. See here: jsfiddle.net/aN4g4/47.

Thanks for the suggestion! Although the nav li are set to relative already. I'll add the current CSS to my edit.

– DeanHyde May 24 at 13:12 Nope. Take a look in the demo. – Ricardo Arruda May 24 at 13:15 The demo is certainly acting strangely.

Here it is with some extra styling: jsfiddle. Net/aN4g4/49 . My main problem is that the hover event is triggered regardless of whether the mouse has left the button, so the button constantly shifts up and down if the mouse moves.

– DeanHyde May 24 at 13:23.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions