jQuery Dersleri – fadeOut , fadeIn, fadeTo

jQuery Derslerimize fadeOut , fadeIn, fadeTo efektleri ile devam ediyoruz. Ne yapıyor bu efektler derseniz nesnelerin opacity (şeffaflık) değerlerini değiştirerek sayfada görünür, görünmez veya belirlediğimiz oranda şeffaf yapıyorlar.
Şöyle yapalım sayfamızda

<p class="gizle">Bana Tıklarsan Kaybolorum ... </p>
<p class="seffaf">Bana Tıklarsan Şeffaf olurum ... </p>
<p class="goster">Bana Tıklarsan Kaybolanları Getiririm ...</p>

ile üç paragraf oluşturalım burada dikkat ederseniz her paragrafı ayrı bir sınıf tanımladık bunları script bölümünde kullanacağımız efektlerle uyumlu olması için gizle, seffaf ve goster olarak ayarladım.
Sayfamıza

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js">  </script>

ile jQuery kütüphanesini sayfamıza çağırıyoruz, daha sonra tanımladığımız sınıflar üzerinde işlem yapacak olan kodları yazıyoruz.

<script type="text/javascript"> 
$("document").ready(function(){ 
$(".gizle").click(function(){ 
$(".gizle").fadeOut("slow"); 
}); 
$(".goster").click(function(){ 
$(".gizle").fadeIn("slow");
}); 
$(".seffaf").click(function(){ 
$(".seffaf").fadeTo("slow",0.3); 
}); 
}); 
</script> 

gizleye tıklandığında fadeOut, gostere tıklandığında fadeIn ve seffafa tıklandığında fadeTo efektleri çalışacak. Uygulamanın çalışan hali ve kodları aşağıda kolay gelsin…

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bilişim Öğretmeni jQuery Dersleri Fade Efekti</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js">  </script>
<script type="text/javascript"> 
$("document").ready(function(){ 
$(".gizle").click(function(){ 
$(".gizle").fadeOut("slow"); 
}); 
$(".goster").click(function(){ 
$(".gizle").fadeIn("slow");
}); 
$(".seffaf").click(function(){ 
$(".seffaf").fadeTo("slow",0.3); 
}); 
}); 
</script> 
</head>
<body>
<p class="gizle">Bana Tıklarsan Kaybolorum ... </p> 
<p class="seffaf">Bana Tıklarsan Şeffaf olurum ... </p> 
<p class="goster">Bana Tıklarsan Kaybolanları Getiririm ...</p> 
</body>
</html>
X

Pin It on Pinterest

X