JQuery Zincirleme Animasyonlar

Zincirleme Animasyon

Aynı nesneye art arda birden fazla efekt veya animasyon uygulanacak ise tek satırda bu işi halledebiliriz.

Aşağıdaki gibi bir kullanım ile aynı nesneye uygulanacak metotların tümünü araya nokta koyarak art arda yazabiliriz. Metotlar yazdığımız sıraya göre ve biri bittiğinde diğeri başlayacak şekilde çalışacaktır.

Bu yöntemin en önemli avantajı, tarayıcının her metot için ilgili nesneyi tekrar bulmak zorunda kalmamasıdır.

$("#button1").click(function(){

    $("#kutu1").animate({width: '250px'},2000).fadeTo(2000,0.5).slideUp(2000);

});

Yukarıdaki örnekte kutu1 nesnesine 3 ayrı metot tek satırda uygulanmıştır.

Eğer satırın çok uzaması sizi rahatsız ederse aşağıdaki gibi alta da geçebilirsiniz.

$("#button1").click(function(){

    $("#kutu1").animate({width: '250px'},2000)

.fadeTo(2000,0.5)

.slideUp(2000);

});

Animasyon Zincirini Durdurma

Zincirleme şekilde yazılmış metotlar çalışırken, stop komutu kullanılabilir.

Bir önceki konuda stop metodu ile ilgili anlatılan her şey, metot zincirleri için de geçerlidir.

Örnekler kısmında hem zincirleme metot, hem de stop metodu farklı şekillerde kullanılmıştır.

jquery dersleri ve örnekleri, zincirleme animasyon oluşturma, metot zinciri oluşturma, method chaining examples

KONU İLE İLGİLİ ÖRNEKLER

Örnek: Animasyon zinciri ve durdurma Kendin Dene

Kodları Dene butonuna tıklayarak örneğin kodlarını inceleyebilir ve değiştirebilirsin.

Yukarıdaki örnekte button1 metot zincirini başlatmakta, diğer butonlar ise durdurmaktadır.


YORUMLAR




5745  kez okundu.

Online Kullanıcı Sayısı 551



JQuery-Zincirleme-Animasyonlar