Jquery Animasyonlarında Dikkat Edilmesi Gereken Önemli Bir Nokta

Bu sabah jquery ile yaşadığım kötü hatıra ile not etme gereği duydum

Sıradan bir menü efekti için mouse linklerin üzerine geldiğinde linklerin sağa doğru animasyonunu sağlayan kod kabaca şu şekilde olabilir.

$(document).ready(function() {    
$('ul a')        
  .hover(
  function() {$(this).animate({ left: 30 });}, 
  function() { $(this).animate({ left: 0 });});
  });

Görmek için: http://jsbin.com/oyaxe

Kodu daha yakın incelemek/düzenlemek için: http://jsbin.com/oyaxe/edit

Fakat yukarıdaki örnekde mouse hızlıca linklerin üzerinden bir kaç gez gidip geldiğinde linklerin tüm animasyonu tamamlamak için animasyonları kuyruğa koyar ve mouse artık başka yerde olsa bile önceki hareketinin tetiklediği animasyonlar bir süre devam eder. Bu önemli nokta genellikle atlanıyor. Bunun önüne geçmek için animate() fonksiyonundan hemen önce stop() fonksiyonu kullanılmalı. Şöyle ki:

$(document).ready(function() {    
$('ul a')        
  .hover(
  function() {$(this).stop().animate({ left: 30 });}, 
  function() { $(this).stop().animate({ left: 0 });});
  });

Görmek için : http://jsbin.com/ayizi/

Kodu daha yakın incelemek/düzenlemek için: http://jsbin.com/ayizi/edit

Etraflıca bakınmanız için ek bağlantılar:
http://docs.jquery.com/Effects/stop
http://docs.jquery.com/Effects/animate
http://docs.jquery.com/API/1.3/Effects