jquery prevent unwanted animation <p>I have a list of of 10 icons that make up a menu. By default, the first icon will be bigger than the others to show that it is active. When the user hovers over another icon, the first icon will shrink and the other will grow and if they hover out, the first icon will return to its big (active) state again.</p> <p>The problem is, if you quickly hover the other icons, the first will attempt to grow and thus cause it to look like it's shaking. Is there a way to stop this from happening? Here is a test page I set up: <a href="http://recoverstudio.com/icon_menu/" rel="nofollow noreferrer">http://recoverstudio.com/icon_menu/</a></p> <p>jquery:</p> <pre><code> $("#icon_one").width(76).height(76).css({ 'top' : '-15px', 'left' : '-15px'}); $(".icon").hover(function(){ $(this).stop().css({'z-index':10}).animate({top: -15, left: -15, height: 76, width: 76}, 75); $("#icon_one").stop(true).animate({top: 0, left: 0, height: 45, width: 45}, 75); }, function(){ $(this).stop().css({'z-index':1}).animate({top: 0, left: 0, height: 45, width: 45}, 75); $("#icon_one").stop(true).animate({top: -15, left: -15, height: 76, width: 76}, 75); }); </code></pre> <p>css:</p> <pre><code>img { border: 0; } ul li { float:left; list-style:none; padding: 0 15px 0 0; height: 45px; width: 45px; } ul li a img { display: block; height: 45px; position: relative; width: 45px; } </code></pre> <p>html:</p> <pre><code> &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="icon_one.png" id="icon_one" class="icon" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="icon_two.png" id="icon_two" class="icon" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="icon_three.png" id="icon_three" class="icon" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="icon_four.png" id="icon_four" class="icon" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="icon_five.png" id="icon_five" class="icon" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="icon_six.png" id="icon_six" class="icon" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="icon_seven.png" id="icon_seven" class="icon" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="icon_eight.png" id="icon_eight" class="icon" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="icon_nine.png" id="icon_nine" class="icon" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="icon_ten.png" id="icon_ten" class="icon" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre>