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:
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
http://docs.jquery.com/Effects/stop
http://docs.jquery.com/Effects/animate
http://docs.jquery.com/API/1.3/Effects
8 comments:
Fakat ikinci yazdığınız kodda butonlar sağa kaymıyor :) yada firefox desteklemiyor :)
Bir noktayı koymayı unutmuşum. Fakat kullanılması gereken yöntem aynı.
Noktayı ekledim. Linkleri güncelledim. Teşekkürler.
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
@Ö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.
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 :)
Belki de jsbin deki kodu güncellemeyi unuttunuz
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 :)
olur böyle şeyler :)
Post a Comment