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>
