jQuery Dersleri – slideUp, slideDown, slideToggle

jQuery Dersleri – slideUp, slideDown, slideToggle efektleri ile sayfa içerisinde belirttiğimiz nesneleri gizleme veya göstermeyi sağlıyor. Kullanımları ise aşağıdaki gibidir.

$(secici).slideUp();
$(secici).slideDown();
$(secici).slideToggle();

slideUp() = Seçilen elemanı yukarı doğru gizler
slideDown() = Seçilen elemanı aşağı doğru gizler.
slideToggle() = Seçilen elemanı hem yukarı hem de aşağı doğru gizler.

Aşağıdaki örnekte slideToggle ile bir uygulama yaptık, uygulamamızda oluşturduğumuz baslik sınıflı paragrafa tıkladığımızda kutu isimli div açılıp kapanıyor, kodlarımız ve uygulamanın çalışmanın demosu aşağıda

<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(){ 
$(".baslik").click(function(){ 
$(".kutu").slideToggle("slow"); 
}); 
}); 
</script> 
<style type="text/css"> 
div.kutu { 
height:120px; 
display:none; 
} 
div.kutu, p.baslik{ 
margin:0px; 
padding:0px; 
text-align:center; 
background:lightyellow; 
border:1px solid black; 
}  
</style> 
</head>
<body>
<div class="kutu"> 
<a href="">Bilişim Öğretmeni jQuery Dersleri Slide Efekti</a><br/> 
Slide için üç efekt türü var slideDown, slideUp, slideToggle<p> 
Başlığa tıklayınca açılıp kapanan nesneler oluşturmamızı sağlıyor...</p> 
</div> 
<p class="baslik">Sayfa içeriğini görmek için tıklayın... Aç / Kapa</p> 
</body>
</html>
  • Sanane

    gayet sade ve hoş bir anlatım olmuş 😀 tşk…

X

Pin It on Pinterest

X