JQuery animate(), stop() Kullanımı

Merhaba Arkadaşlar,
Bu makalede Jquery ile nasıl animasyonlar yapabiliriz onu öğreneceğiz.Kullanımı şu şekilde; $(seçici).animate({parametreler}, hız, geri dönüş); Öncelikle animasyon uygulamak istediğimiz etiketi seçiyoruz.Burda parametreler tanımlanmak zorundadır ve animasyon için gerekli css kodları burda tanımlanır.hız parametresi opsiyoneldir ve “slow”, “fast” değerleri alabildiği gibi milisaniye cinsinden de değer verilebilir.geri dönüş parametresi opsiyoneldir ve animasyon kodlarımız tamamen sonlandıktan sonra çalışmasını istediğimiz kodlar varsa bu kısımda tanımlarız.

Örneğimizde 3 farklı animasyon var.

► Animate-1’de soldan sağa 100px kaydırıp, boyutunu büyütüp son olarak şeffaflığını yarıya düşürüyoruz.

► Animate-2’de her tıklama sonrası border-radius değerini 10% arttırıp yuvarlak hale getiriyoruz.

► Animate-3’de her tıklamada gizle-göster mantığıyla görünür ise gizliyoruz, gizliyse görünür hale getiriyoruz.

► Reset’de ise başlangıç değerlerine döndürüyoruz.

Html kodlarımız,

Css kodlarımız,

Jquery kodlarımız,

stop() metodu ise, animasyonları veya efektleri tamamlanmadan durdurmak için kullanılır.Kullanımı şu şekilde, $(seçici).stop(stopAll, goToEnd); Burda stopAll parametresi opsiyonel’dir ve varsayılan değeri false’dur.Bu şekilde kullanıldığında sadece etkin animasyon veya efekti durdurur.Diğerlerinin ise daha sonra gerçekleştirilmesine izin verir.goToEnd parametreside opsiyonel’dir ve varsayılan değeri false’dur.Bu şekilde kullanıldığında etkin animasyon veya efekt tamamlanmadan sonlandırılır.Uygulamamıza bakarsak;

► Başlat’a tıkladığımızda animasyon başlayacak.Soldan sağa, yukardan aşağı, sağdan sola, aşağıdan yukarı olacak şekilde hareket edip tekrar başlangıç noktasına gelecek.Ve her adım 3 saniyede gerçekleşecek.

► Durdur’a tıkladığımızda o an hangi animasyon gerçekleşiyorsa sadece o duracak ve bir sonraki animasyondan devam edecek.

► Hepsini Durdur’a tıkladığımızda tüm animasyonları durdurmuş oluruz.

► Animasyonu Tamamla ve Durdur’a tıkladığımızda ise o anki animasyonu tamamlar ve durur.

Html kodlarımız,

Css kodlarımız, 

Jquery kodlarımız,

Yeni bir makalede görüşmek üzere.

Önceki : JQuery Dersleri 7 – slideDown(), slideUp(), slideToggle() Kullanımı

Sonraki : JQuery Dersleri 9 – Callback Fonksiyonu Nedir?

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +