Jquery ile İçerik Gizleme/Gösterme | fadeIn/fadeOut

Merhaba arkadaşlar, bu dersimizde jquery ile herhangi bir içeriği fadeIn ve fadeOut komutları ile gizleyip göstereceğiz. Sayfamızda iki adet aç kapa adında yazı var. Bunlara basınca div’imiz gizlenip açılıyor. Ayrıca hangi yazıya bastığımızı(Aç/Kapa) jquery’nin özelliği olan index numarasından anlıyoruz. Unutmayın index numaraları sıfırdan başlar.

Sayfamıza ilk önce jquery kodunu import ediyoruz ;

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

Ardından jquery kodlarımı yazıyoruz. Burada ul tagının içindeki li tagına erişilip basılıp basılmadığını kontrol ediyoruz. Basılmış ise ” $(this).index() ” kodu ile o tagın index numarasını alıyoruz. İndex numaraları her zaman sıfırdan başlar. fadeIn ve fadeOut kodlarımızda bulunan sayısal değer animasyon hızıdır. Oraları kendinize göre değiştirebilirsiniz.

<script type="text/javascript">
$(function(){
   $("ul li").click(function(){
	  if($(this).index()==0)
	   {
		   $("div").fadeIn(1000);
	   }
	   else {
		    $("div").fadeOut(1000);
	   }
   })
   
})
</script>

Kodlarımızın genel görünümü şu şekildedir ;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AtknUludag.Com</title>

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

<script type="text/javascript">
$(function(){
   $("ul li").click(function(){
	  if($(this).index()==0)
	   {
		   $("div").fadeIn(1000);
	   }
	   else {
		    $("div").fadeOut(1000);
	   }
   })
   
})
</script>

<style type="text/css">
 div{background-color: #646464; border: 2px solid #000; padding:15px}
 a{color:black; text-decoration:none};
</style>
</head>

<body>
	<div><a href="http://www.atknuludag.com">Atakan Yasin Uludag</a></div>
		<ul>
			<li><a href="#">Aç</a></li>
			<li><a href="#">Kapa</a></li>
		</ul>
</body>
</html>

Demo için : Jquery ile İçerik Gizleme/Gösterme | fadeIn/fadeOut

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.