I have a div that when you hover over it shows different browsers and if they are supported, done in css. However, I also wanted to have them animate in with jquery, which I have working.
However, if you move the mouse to quickly over the hover area and then hover over it, that animation won’t re-trigger. You have to move the mouse quite far away, and then hover over it. The best way to recreate this problem I find is to put your mouse above it and quickly hover over it and out again a few times.
I suspect that the reason is that jquery still thinks the mouse is over, even though the css hides it and says it’s not. I also think having to move the mouse far away is time related rather than distance, but again not sure. Also I’ve tried .mouseover(), .hover(), and .mouseenter(), with .mouseenter() seeming to behave the best.
Is this suspected behavior? It’s not exactly ‘breaking’, but I would like for this effect to work. If this is expected behavior, would possibly a css3 animation be able to copy the effect how I would want?
Also as a side note, if you viewed the fiddle, any others browsers I should think of adding? (personal perspective ok, but more of if any browsers have sneakily gotten more popular)
You can solve this by adding stop()
More info here : http://api.jquery.com/stop/