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.
UstaDerslik
