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

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);
    }
);