Yaptığınız web sitesinde bazı kısımlarda efektler vermelisiniz. Göster-gizle gibi alanlarda en fazla fade efekti kullanılır. FadeIn ile gösterilecek alanın opacity(şeffaflık) değeri belirlediğiniz süre içerisinde artarak nesne görünür hale gelir, fadeOut ise tam tersi şekilde opacity değeri düşerek nesne gizlenir.
Örnek vermek gerekirse id değeri “nesne” olan bir katmanımız olsun.
Butona tıklayınca nesnemiz kaybolsun (fadeOut)
$(“button”).click(function(){
$(“#nesne”).fadeOut();
});Butona tıklayınca 500 ms sürede nesnemiz gözüksün (fadeIn)
$(“button”).click(function(){
$(“#nesne“).fadeIn(500);
});Butona tıklayınca nesnemiz gözüküyorsa gizlensin, gizliyse gözüksün (fadeToggle)
$(“button”).click(function(){
$(“#nesne”).fadeToggle();
});Fade efekti yavaş olarak tamamlandıktan sonra ekrana uyarı verelim.
$(“button”).click(function(){
$(“#nesne”).fadeOut(“slow”, function(){ alert(“fade efekti tamamlandı.”) });
});
