Jquery,防止排队动画

时间:2011-11-15 11:32:42

标签: jquery queue jquery-animate

我有一个div,它在悬停时淡入/淡出页面上的另一个元素(并悬停)。麻烦的是没有什么可以阻止用户快速地徘徊,并导致动画排队。

这是我的代码:

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

这是jsfidde的链接:http://jsfiddle.net/btEXH/

1 个答案:

答案 0 :(得分:5)

您想使用stop函数并为clearQueue和jumpToEnd传递true。

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

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