jquery

The usefulness of the&nbsp;<code style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); background-position: initial initial; ">.stop()</code>&nbsp;method is evident when we need to animate an element on<code style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); background-position: initial initial; ">mouseenter</code>&nbsp;and&nbsp;<code style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); background-position: initial initial; ">mouseleave</code>:
<pre style="padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 1.1em; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(251, 249, 234); color: rgb(51, 51, 51); border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(226, 225, 213); border-right-color: rgb(226, 225, 213); border-bottom-color: rgb(226, 225, 213); border-left-color: rgb(226, 225, 213); text-align: left; font-weight: normal; font-family: monaco, monospace; float: none; width: auto; overflow-x: auto; -webkit-border-top-right-radius: 2px 2px; -webkit-border-top-left-radius: 2px 2px; -webkit-border-bottom-left-radius: 2px 2px; -webkit-border-bottom-right-radius: 2px 2px; background-position: initial initial; "><div id="hoverme">
Hover me
<img id="hoverme" src="book.png" alt="" width="100" height="123">
</div></pre>We can create a nice fade effect without the common problem of multiple queued animations by adding&nbsp;<code style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); background-position: initial initial; ">.stop(true, true)</code>&nbsp;to the chain:
<pre style="padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 1.1em; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(251, 249, 234); color: rgb(51, 51, 51); border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(226, 225, 213); border-right-color: rgb(226, 225, 213); border-bottom-color: rgb(226, 225, 213); border-left-color: rgb(226, 225, 213); text-align: left; font-weight: normal; font-family: monaco, monospace; float: none; width: auto; overflow-x: auto; -webkit-border-top-right-radius: 2px 2px; -webkit-border-top-left-radius: 2px 2px; -webkit-border-bottom-left-radius: 2px 2px; -webkit-border-bottom-right-radius: 2px 2px; background-position: initial initial; ">$('#hoverme-stop-2').hover(function() {
$(this).find('img').stop(true, true).fadeOut();
}, function() {
$(this).find('img').stop(true, true).fadeIn();
});</pre><blockquote style="padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; margin-top: 1em; margin-right: 1.5em; margin-bottom: 1em; margin-left: 1.5em; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 10px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; quotes: none; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(226, 225, 213); border-right-color: rgb(226, 225, 213); border-bottom-color: rgb(226, 225, 213); border-left-color: rgb(226, 225, 213); -webkit-border-top-right-radius: 2px 2px; -webkit-border-top-left-radius: 2px 2px; -webkit-border-bottom-left-radius: 2px 2px; -webkit-border-bottom-right-radius: 2px 2px; background-position: initial initial; ">Animations may be stopped globally by setting the property&nbsp;<code style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); background-position: initial initial; ">$.fx.off</code>&nbsp;to&nbsp;<code style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); background-position: initial initial; ">true</code>. When this is done, all animation methods will immediately set elements to their final state when called, rather than displaying an effect.
</blockquote>