• Şuradasınız
  • Anasayfa
  • JQuery
  • Jquery ile Sınıf Ekleme Çıkarma Animasyonları

Jquery ile Sınıf Ekleme Çıkarma Animasyonları

Jquery dili ile bir HTML nesnesinin sınıfı üzerinde değişiklik yapabilirsiniz.

Bir nesnenin sınıfını değiştirmek için addClass, removeClass, toggleClass ve switchClass fonksiyonları kullanılır. Bunlardan Jquery ve Niteleyiciler (Attributes) adlı yazımda bahsetmiştim, bu yazımda ise bu fonksiyonları animasyon şeklinde kullanmaya çalışacağız.

Jquery UI Efekt kütüphanesi ile birlikte sınıf ekleme çıkarma fonksiyonlarını daha efektiv bir şekilde kullanabilirsiniz. Bunun için öncelikle gerekli kütüphaneleri sayfanıza eklemelisiniz.

<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript" src="jquery.effects.core.js"></script>

addClass fonksiyonu ile başlayalım. addClass fonksiyonu istediğiniz bir sınıfı seçtiğiniz nesneye eklemenizi sağlar.

$("a").click(function(){
   $(".ilk").addClass("sonraki","slow");
});

Sonuca buradan bakabilirsiniz. Gördüğünüz gibi normal addClass fonksiyonu, Jquery UI kütüphanesi ile beraber kullanıldığında daha efektiv olabiliyor.

“slow” ile belirttiğim parametre bölümünde 1000, 2000, “fast” gibi değerler de kullanabilirsiniz.

removeClass fonksiyonu ile bir nesnenin üzerindeki sınıfları silebiliyorsunuz.

$("a").click(function(){
   $(".fiziksel").removeClass("gorsel","slow");
});

Örneği buradan inceleyebilirsiniz.

toggleClass fonksiyonu ile addClass ve removeClass işlemlerini aynı fonksiyon bloğu içerisinde yapabilirsiniz. Biz tabii ki bu fonksiyonu Jquery UI Efekt kütüphanesi ile beraber kullanacağız.

$("a").click(function(){
   $(".fiziksel").toggleClass("gorsel","slow");
});

Sonuca buradan bakabilirsiniz.

Son olarak switchClass fonksiyonuna bakalım. Bu fonksiyon ile önce silinecek sınıfı sonra da eklenecek sınıfı belirtiyoruz.

$("a").click(function(){
   $(".ilk").switchClass("ilk","sonraki","slow");
});

Bu örnekte önce “ilk” adlı sınıf silinmiş, sonra da “sonraki” adlı sınıf eklenmiştir.

Sonuca buradan bakabilirsiniz.

Benim bu konu ile ilgili olarak anlatacaklarım bu kadardı, siz dilerseniz buradaki kaynağıda inceleyebilirsiniz.

Benzer Yazılar

Yorumlar

Yorum Yazın

Su elementleri kullanabilirsiniz : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Arama
RSS
Beni yukari isinla