CODEWITHSUNDEEP
jqueryqueuejquery-animate
Tom
Tom

Reputation: 12988

Jquery, prevent queuing animations

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/

Upvotes: 5

Views: 264

Answers (1)

Richard Dalton
Richard Dalton

Reputation: 35793

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/

Upvotes: 5

Related Questions