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

Bu yazımızda Jquery ile nasıl animasyonlar yapabiliriz onu öğreneceğiz.

Animasyonları şu şekilde kullanıyoruz.

Öncelikle animasyon uygulamak istediğimiz etiketi seçiyoruz.

Burada parametreler tanımlanmak zorundadır ve animasyon için gerekli Css kodları burada 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ı

Css Kodları

Jquery Kodları

stop metodu ise animasyonları veya efektleri tamamlanmadan durdurmak için kullanılır.

Stop metodunun kullanımı şu şekilde.

Burada stopAll parametresi opsiyoneldir 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 opsiyoneldir ve varsayılan değeri false‘dur. Bu şekilde kullanıldığında etkin animasyon veya efekt tamamlanmadan sonlandırılır.

Uygulamamıza bakacak olursak;

► 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. 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ı

Css Kodları

Jquery Kodları

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Leave a Reply

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