Jquery, предотвратить анимацию в очереди

Question

У меня есть div, который затухает In / Out другой элемент на странице при наведении (и зависания). Беда в том, что ничто не мешает пользователю быстро зависать и заставлять анимацию стоять в очереди.

Вот мой код:

<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/

Answer 1

Вы хотите использовать функцию stop и передать true для clearQueue и jumpToEnd.

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

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