Does stop() Only Work With animate()?

Question

I've got a simple setup where when one hovers over the #ProductLink li, #ProductListing ul opens, then closes when the mouse moves away.

$(document).ready(   function() {
    $("#ProductLink").hover(
      function() {
        $('#ProductListing').slideDown(200);
      },
      function() {
        $('#ProductListing').slideUp(200);
      }
    )   } )

This works but the predictable side effect is that multiple passes over and out of #ProductLink cue the sliding up and down. I have tried to use stop() to keep this from happening without success and am wondering if stop() only works with animate().

If stop() does work in this instance then I would appreciate a pointer in the right direction.

Thanks -

george

Answer 1

From the looks of the documentation, it stops any and all animation. I just created a test-case on my machine, and $.stop() did indeed stop $.slideDown() as expected.

  $("a.stop").click(function(e){
    e.preventDefault();
    $(".bigBox").stop(); // in the process of animation
  });

Answer 2

stop() does work with slideUp() and slideDown()

Like so:

$("#ProductLink").hover(
    function() {
        $('#ProductListing').stop().slideDown(200);
    }, function() {
        $('#ProductListing').stop().slideUp(200);
    }
);

When using sliders, you'd want to finalize the ongoing animation as well, so you can pass booleans to the stop() method to gain more control:

$("#ProductLink").hover(
    function() {
        $('#ProductListing').stop(false,true).slideDown(200);
    }, function() {
        $('#ProductListing').stop(false,true).slideUp(200);
    }
);