İlginizi Çekebilir
  1. Ana Sayfa
  2. jQuery
  3. jQuery Dersleri – slideUp, slideDown, slideToggle

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>
Yorum Yap

1
Kimler Neler Demiş?

Bir Cevap Yazın

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

  Subscribe  
Bildir
Sanane
Ziyaretçi
Sanane

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