jQuery Dersleri – slideUp, slideDown, slideToggle

admin tarafından

3 Kasım 2012 221 kez okundu Okuma süresi: 1dk, 40sn

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>

Uygulamayı Test Et

Bu İçeriğe Tepkin Ne Oldu?