Jquery Ders-29 Slidedown - Slideup - SlideToggle Kullanımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Ders-29 Slidedown - Slideup - SlideToggle Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(4073)
RAPOR ET
Jquery derslerimize devam ediyoruz.Bu derste slide açma kapama kodlarını göreceğiz.Slide kodları show,hide,toggle ile aynı işlevi yapar ama açılma ve kapanma şekilleri farklıdır.Yani yukarıdan aşağı doğru açılıp aşağıdan yukarı doğru efektleri vardır.Kodlarımıza geçelim.


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


slideDown yukarıdan aşağı doğru açar.
slideUp aşağıdan yukarı doğru kapama yapar.
slideToggle ise açık ise kapar ,kapalı ise açar.

Parantez içindeki sayı ise animasyon süresidir.1000=1saniyedir.

Genel örnek :

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#ac").click(function(){ $(".kutu").slideDown(500); })
$("#kapa").click(function(){ $(".kutu").slideUp(500); })
$("#ak").click(function(){ $(".kutu").slideToggle(500); })
})
</script>
<style type="text/css">
.kutu{width:150px;height:150px;background:#666;}
</style>
</head>
<body>

<button id="ac">Aç</button> <button id="kapa">Kapa</button> <button id="ak">Aç/Kapa</button><br /><br />
<div class="kutu"></div>

</body>
</html>


Örnekte kutu şeklinde bir div var.butonlara basarak açma kapama işlemini görebilirsiniz.




davmaneydi
davmaneydi 2 Yıl Önce Cevaplandı
hocam nasıl aşşa inerek yok olacak yani örnektekini tam tersini yapmamıyormuyuz.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol