Jquery, prevent queuing animations

Question

I have a div which fades In/Out another element on the page on hover (and hover out). The trouble is there's nothing to stop the user hovering over and out really quickly and causing the animation to queue up.

Here's my code:

<div class="hovertest">test</div>

<div class="test">test2</div>

Jquery:

$("div.hovertest").hover(
      function () {
        $(".test").fadeOut();
      }, 
      function () {
        $(".test").fadeIn();
});

CSS:

div {
    width:200px;
    height:100px;
    background-color:#B22;
}

And here's a link to jsfidde: http://jsfiddle.net/btEXH/

Answer 1

You want to use the stop function and pass true for clearQueue and jumpToEnd.

$("div.hovertest").hover(
  function () {
    $(".test").stop(true, true).fadeOut();
  }, 
  function () {
    $(".test").stop(true, true).fadeIn();
}); 

http://jsfiddle.net/infernalbadger/btEXH/1/