Wednesday, June 3, 2009

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

8 comments:

Özgür Kuru said...

Fakat ikinci yazdığınız kodda butonlar sağa kaymıyor :) yada firefox desteklemiyor :)

Hasan Tayyar Beşik said...

Bir noktayı koymayı unutmuşum. Fakat kullanılması gereken yöntem aynı.
Noktayı ekledim. Linkleri güncelledim. Teşekkürler.

Özgür Kuru said...

Fakat ilk kod ile farklı bir sonuç çıkmıyor bu seferde. Jquery bilmiyorum yeni uğraşmaya başladım. Fakat ilk kodda yaptığı şeyi ikinci kodda da yapıyor :S

Hasan Tayyar Beşik said...

@Özgür ;
Buradaki durum şu fareyi ilk örnekte menü üzerinden hızlıca üç dört kez geçir ve bekle. Menü elemanları hala animasyon içinde olacaklar. Ancak ikinci örnekte fare üzerinden gittiğinde animasyon o an duracaktır.

Özgür Kuru said...

Bende diyorumki ilk örnekte olduğu gibi fareyi bir kaç kez üzerinden geçirip boş bir alana sürüklediğimde hala animasyon devam ediyor :)

Özgür Kuru said...

Belki de jsbin deki kodu güncellemeyi unuttunuz

Hasan Tayyar Beşik said...

hay allah :D , neyse anlatmak istediğimi gördüyeseniz bu düzeltmeyi unutmalarım bir sorun veya kafa karışıklığı çıkarmamıştır (umarım).
ama artık untuğum bir şey yok sanırım. jsbin linkini de güncellediğime göre :)

Özgür Kuru said...

olur böyle şeyler :)