Как остановить jQuery от эффектов буферизации при наведении?

Question

У меня есть два изображения, сложенных друг на друга и пытающихся использовать его для навигации. При наведении курсора я использую jQuery для перехода в 0 и обратно в 1, когда курсор уходит. Это работает, но здесь моя проблема. Если вы наведите курсор мыши на элемент списка взад-вперед несколько раз, он буферизирует эффекты. Как мне остановить его из буфера? Спасибо!

Сценарий

$(document).ready(function () {
$("li").hover(function(){
$(this).fadeTo(250, 0);
},function(){
$(this).fadeTo(350, 1);
});
});

HTML

<div id="link1img"></div>

  <ul>
  <li id="link1"><a href="index.html">Home</a></li>
  </ul>

CSS

#link1 {
background-image: url(../images/home_normal.png);
background-repeat: no-repeat;
text-indent: -9999px;
position: absolute;
height: 17px;
width: 67px;
left: 0px;
top: 10px;
}
#link1img {
background-image: url(../images/home_mo.png);
background-repeat: no-repeat;
position: absolute;
height: 17px;
width: 67px;
left: 0px;
top: 11px;
}

Answer 1

Остановите старые эффекты, используя .stop(), прежде чем продолжить:

$(document).ready(function() {
    $("li").hover(function() {
        $(this).stop().fadeTo(250, 0);
    }, function() {
        $(this).stop().fadeTo(350, 1);
    });
});

Answer 2

Используйте .stop(true), чтобы отменить любые анимации, которые в данный момент выполняются для этого объекта, и удалить их из очереди анимации, чтобы ваша следующая анимация могла начаться немедленно и не должна ждать окончания текущей:

$(document).ready(function () {
    $("li").hover(function(){
        $(this).stop(true).fadeTo(250, 0);
    },function(){
        $(this).stop(true).fadeTo(350, 1);
    });
});

См. Ссылку jQuery на .stop() для получения дополнительной информации.