jquery fadein stop

Question

i have following script

 <script>
  $(document).ready(function(){
   $("div.mover").hover(function () {
  $("div.hide1").fadeTo("slow", 0.33);

  $("div.hide1").fadeTo("slow", 1);

},function(){
  $("div.hide1").stop();
});
  });
 </script>

 and html page is

<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
<td><div class="mover"><IMG SRC="images/buttons_full_01.png" ></div></td>
 </tr>
 <tr>
<td><div class="mover"><IMG SRC="images/buttons_full_02.png"></div></td>
 </tr>
<tr>
<td><div class="mover"><IMG SRC="images/buttons_full_03.png"></div></td>
</tr>
</table>

my function is to fade the background on mouse over of button

but the problem if i hover mouse over all buttons and after mouse left the buttons animation keep continue till it complete its all transactions.

what i want is: as mouse left the buttons animation come to $("div.hide1").fadeTo("slow", 1); and stop

Answer 1

Your initial function works fine as long as the mouse pointer isn't dragged out over a second (or third) "mover" div. When that happens, you may get several animations queued up like this:

mover1.hover-over()
mover2.hover-over()

By default, calling stop only terminates the current animation - the animation initiated for the first mover, not the animation queued for the second mover.

You can prevent the additional animations from running by clearing the animation queue when you call stop, which accepts an optional parameter clearQueue:

$(document).ready(function(){     
    $("div.mover").hover(function () {
        $("div.hide1").fadeTo("slow", 0.33).fadeTo("slow", 1);
    }, function(){
        // Added stop parameters and added an additional fadeTo,
        // to make sure we get back to 100% opacity.
        $("div.hide1").stop(true).fadeTo("slow", 1);
    });
});