TIP: Cycling/Cancelling Animation using jQuery

Question

Thought this would be worth sharing with you folks if you're wondering how to cancel animations midway or force cycling et cetera...
From the page...
Animate wide on mouseEnter
Animate back on mouseLeave
No matter what, perform a complete wide/back cycle
Not queue up animations on multiple hovers
Be smooth
http://css-tricks.com/examples/jQueryStop/

Answer 1

yes but:
1) Edge UI provides:
mouseenter
mouseleave
We known that .hover() use both mouseenter and mouseleave.
And we known that mouseenter and mouseleave work better than mouseover and mouseout using apple devices.
2) Edge API provides:
isPlaying()
isPlayDirectionReverse()
isPlaying
Description: Returns a boolean that indicates whether the default timeline is playing.
Example
if (sym.isPlaying()) { console.log("Timeline is currently playing."); }
isPlayDirectionReverse
Description: Returns a boolean that indicates whether the default timeline play direction is reverse.
Example
if (sym.isPlayDirectionReverse()) { console.log("playing backwards through the timeline"); }
Therefore:
(':not(:animated)') or (!$(this).hasClass('animated')) can be replaced by sym.isPlaying().