jQuery animate(), stop() Metodları ve Kullanımları

Bu yazımızda jQuery kullanarak animasyonları nasıl yapabileceğimizi anlatacağım. jQuery ile animasyonları yapabilmek için animate() metodunu kullanıyoruz.

animate() Metodu ve Kullanımı

jQuery’de animate() metodunun kullanımı şu şekilde:

Kullanımını biraz daha detaylandıracak olursak:

 ⇒  İlk olarak animasyon uygulamak istediğimiz Html öğesini seçiyoruz.

 ⇒  Daha sonra animate() metodu içerisinde animasyon için gerekli olan Css kodlarını yazıyoruz. Bu alanı (parametreler) yazmak zorundayız.

 ⇒  Hız parametresi opsiyoneldir ve “slow”“fast” değerlerini alabildiği gibi milisaniye cinsinden de bir değer verebiliyoruz.

 ⇒  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 yazıyoruz.

Örneğimizde 3 farklı animasyon uygulayacağız.

 ⇒  Animasyon-1 butonuna tıklandığında seçtiğimiz Html öğesini soldan sağa 100px kaydırıp, boyutunu büyültüp son olarak şeffaflığını yarıya düşürelim.

 ⇒  Animasyon-2 butonuna her tıklandığında seçtiğimiz Html öğesinin border-radius değerini 10% arttırıp yuvarlak hale getirelim.

 ⇒  Animasyon-3 butonuna her tıklandığında seçtiğimiz Html öğesini gizle-göster mantığıyla görünür ise gizleyelim, gizliyse görünür hale getirelim.

 ⇒  Başlangıç değerlerine dön butonuna tıklandığında seçtiğimiz Html öğesine uyguladığımız tüm özellikleri kaldırıp başlangıç değerlerine döndürelim.

Html Kodları

Css Kodları

jQuery Kodları

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

jQuery’de stop() metodunun kullanımı şu şekilde:

 ⇒  Burada stopAll parametresi opsiyoneldir ve varsayılan değeri false‘dur.

Varsayılan değeri ile kullanıldığında sadece etkin animasyonu veya efekti durdurur. Diğer animasyonların ise daha sonra gerçekleşmesine izin verilir.

 ⇒  goToEnd parametresi de opsiyoneldir ve varsayılan değeri false‘dur. Bu şekilde kullanıldığında etkin animasyon veya efekt tamamlanmadan sonlandırılır.

Şimdi örnek bir uygulama yapalım ve konuyu daha iyi anlamaya çalışalım.

Uygulamamıza bakacak olursak;

 ⇒  Başlat butonuna tıkladığımızda animasyon başlayacak. Seçtiğimiz Html öğesi soldan sağa, yukarıdan aşağıya, sağdan sola, aşağıdan yukarıya olacak şekilde hareket edip tekrar başlangıç noktasına gelecek. Animasyonun her adımı 3 saniyede gerçekleşecek.

 ⇒  Durdur butonuna tıkladığımızda o an animasyonun hangi adımı gerçekleşiyorsa sadece o adım duracak ve bir sonraki animasyon adımından devam edecek.

 ⇒  Hepsini Durdur butonuna tıkladığımızda tüm animasyonları durdurmuş olacağız.

 ⇒  Animasyonu Tamamla ve Durdur butonuna tıkladığımızda ise o anki animasyon adımını tamamlar ve durur.

Html Kodları

Css Kodları

jQuery Kodları

Butonlara tıklayıp etkilerini incelerseniz daha anlaşılır olacaktır.

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

Şu yazılar da ilginizi çekebilir.

jQuery text(), html(), val() Metodları ve Kullanımları

jQuery Nedir? jQuery Ne İşe Yarar? jQuery Kullanımı

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

Yorum Yazın

650+ ABONE ARASINA KATIL

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Bilgisayar, Telefon, Android, Veri Güvenliği ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.

Abone olduğunuz için teşekkürler.

Birşeyler yanlış gitti.