Функция прерывания fadeTo

Question

Есть ли способ прервать анимацию fadeTo при наведении курсора мыши? Например: в приведенном ниже коде, когда кто-то отключает «ползунок $ control», они исчезают до .1 непрозрачности в 1750 мс, но когда вы наводите на них курсор, они исчезают до 1 непрозрачности на 500 мс. Если кто-то должен был отвиснуть от них, и до того, как 1750 мс поднялся, они вернулись на них, регуляторы слайдера $ не исчезли бы до 1 непрозрачности до тех пор, пока не достигнет 1750 мс, что заставляет его казаться невосприимчивым.

$(function() { 
    var fadeDelay = 4000, 
     // hide after 3 second delay 
     timer, hideControls = function (slider) { 
      clearTimeout(timer); 
      setTimeout(function() { 
       slider.$controls.hover(function() { 
       $(this).fadeTo(500, 1.0); 
       }, function() { 
       $(this).fadeTo(1750, 0.1); 
       }); 
      }, fadeDelay); 
     }; 
}); 

Answer 1

Вы можете использовать .stop() для удаления анимации из очереди/остановить текущую анимацию.

Лучшее использование это следующим образом:

$(function() { 
    var fadeDelay = 4000, 
     // hide after 3 second delay 
     timer, hideControls = function (slider) { 
      clearTimeout(timer); 
      setTimeout(function() { 
       slider.$controls.hover(function() { 
       $(this).stop(true,false).fadeTo(500, 1.0); 
       }, function() { 
       $(this).stop(true,false).fadeTo(1750, 0.1); 
       }); 
      }, fadeDelay); 
     }; 
}); 

Это очистит очередь, поэтому все анимации остановлены, а затем запустить анимацию, где был остановлен элемент.

Answer 2

Если вы вызываете метод stop на элемент, он остановит все анимации.

Answer 3

.hover(function() { 
    $(this).stop().fadeTo(500, 1.0); 
}, function() { 
    $(this).stop().fadeTo(1750, 0.1); 
}); 

Answer 4

Вы должны использовать .stop функции JQuery в:

$(function() { 
    var fadeDelay = 4000, 
     // hide after 3 second delay 
     timer, hideControls = function (slider) { 
      clearTimeout(timer); 
      setTimeout(function() { 
       slider.$controls.hover(function() { 
       $(this).stop(1,1).fadeTo(500, 1.0); 
       }, function() { 
       $(this).stop(1,1).fadeTo(1750, 0.1); 
       }); 
      }, fadeDelay); 
     }; 
}); 

Что это делает это останавливает текущую анимацию, и скачет на конечный результат до начала следующего анимации.