jquery class ekleme çıkarma ve sıralı claslama

Başlık tam anlatamamış olabilir, bu konumuzda jquery ile click(); işlemi olsun .hover(); olsun veya ne biliyim, herhangi bir keyup(); keydown(); değişikliğinde veya document.ready olayında bir nesnemize class eklemek istemiş olabiliriz ya, işte bu konuda bu class'ı nasıl ekliceğimizi veya nasıl çıkartacağımızı öğreneceğiz.

class eklerken dikkat etmemiz gereken hususlardan bitanesi, eklemek istediğimiz classımız bir yerde style konumunda yazılı olması gerekli, css'in içinde.
yani :
.sinifadi {margin:20px; padding:10px; background:#ff656565;} //Burda sınıfımız arkaplan rengi filan veriyor.


diyelim ki bir kutumuz var ve birde button. buttona tıkladığımızda kutumuza bu sınıfı atamak istiyorsak kullacağımız kod şu şekilde olmalıdır.

$(".button").click(function(){
      $("#kutu").addClass("sinifadi "); // burda dikkat etmemiz gereken kısım add den sonraki C büyük ve sınıfı bidirirken nokta koymamıza gerek yok.
});

Aynı şekilde buttona tıklandığında var olan bir sınıfı silmek istiyorsak

$(".button").click(function(){
      $("#kutu").removeClass("sinifadi "); // burda dikkat etmemiz gereken kısım remove dan sonraki C büyük ve sınıfı bidirirken nokta koymamıza gerek yok.
});

Ama siz her tıkladığınızda bir silsin birde eklesin diyorsanız, toggleClass işinize yarayacak olan şey.

$(".button").click(function(){
      $("#kutu").toggleClass("sinifadi "); // burda dikkat etmemiz gereken kısım add den sonraki C büyük ve sınıfı bidirirken nokta koymamıza gerek yok.
});

Codepen ile bir örnek yaptım ve bu örnekte hem jquery hemde görsel kütüphanesi olan ui yi kullandım. ui nin örneğime kattığı - toggleClass("sinifadi","slow") - slow kısmı. ne işe yarıyor diye sorarsanız sınıfı eklerken verdiğim değere göre ekliyor. yani slow ile yavaş hızda toggleClass yapıyor. anlatamamış olabilirim. örnek çok basit onu inceleyin. :)

Örnek : http://codepen.io/kaya_577/pen/isxJF

Birde toggleClass hover örneği ui ile gecikme efekli :D : http://codepen.io/kaya_577/pen/tuGcw