jQuery Efektleri - Kaydırma (Sliding)
jQuery Efektleri - Kaydırma (Sliding)
jQuery kaydırma metotları yardımı ile elemanları yukarı ve aşağıya doğru kaydırabilirsiniz.
jQuery aşağıdaki kaydırma metotlarına sahiptir:
- slideDown()
- slideUp()
- slideToggle()
- jQuery slideDown() Metodu
Bir elemanı aşağıya doğru kaydırmak için kullanılır.
Yazılış biçimi:
$(seçici).slideDown(hız,geriçağırma);
Kullanımı isteğe bağlı olan hız parametresi, gizleme/görüntüleme hızını belirler ve birimi "slow" (yavaş), "fast"(hızlı) ya da milisaniye türündedir. Kullanımı yine isteğe bağlı olan "geriçağır" parametresiyse, kaydırma olayı tamamlandığı zaman çalıştırılacak bir fonksiyondur.
slideDown() örnek HTML5 kodunu aşağıda inceleyebilirsiniz:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel,#flip
{
padding:7px;
text-align:center;
background-color:#e5eefc;
border:solid 2px #c3c4c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">PANELI INDIRMEK ICIN TIKLA</div>
<div id="panel">Geleceği Yazıyorum</div>
</body>
</html>
Farenizle ilgili yere tıkladığınızda aşağı doğru kayarak açılan paneli göreceksiniz.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel,#flip
{
padding:7px;
text-align:center;
background-color:#e5eefc;
border:solid 2px #c3c4c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">PANELI INDIRMEK ICIN TIKLA</div>
<div id="panel">Geleceği Yazıyorum</div>
</body>
</html>
Farenizle ilgili yere tıkladığınızda aşağı doğru kayarak açılan paneli göreceksiniz.
- jQuery slideUp() Metodu
slideDown() metodunun tamamen tersi bir işlev görür; bir elemanı yukarıya doğru götürür. Parametreler ve kullanılışları slideDown() ile aynıdır.
Aşağıdaki slideUp() örnek HTML5 kodunu dikkatle inceleyiniz:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
$(document).ready(function(){
$("#ff").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style>
#panel,#flip,#ff
{
padding:7px;
text-align:center;
background-color:#e5eefc;
border:solid 2px #c3c4c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">PANELI INDIRMEK ICIN TIKLA</div>
<div id="panel">Geleceği Yazıyorum</div>
<div id="ff">PANELI YUKARI KALDIRMAK ICIN TIKLAYIN</div>
<div id="panel">Geleceği Yazıyorum</div>
</body>
</html>
Paneli indirmek için ilgili yere farenizle tıkladığınız zaman, panel aşağı doğru inecektir.
Yine paneli yukarı kaldırmak istediğinizde farenizle ilgili yere tıklayıp paneli yukarı kaldırabilirsiniz.
- jQuery slideToggle() Metodu
slideToggle() metodu, slideUp() ve slideDown() metotlarının peş peşe uygulanmasını sağlar. Parametreler ve kullanılış biçimi bu iki metot ile aynıdır.
Aşağıda slideToggle() örnek HTML5 kodunu inceleyebilirsiniz:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel,#flip
{
padding:7px;
text-align:center;
background-color:#e5efcc;
border:solid 1px #c3c3c4;
}
#panel
{
padding:60px;
display:none;
}
</style>
</head>
<body>
<div id="flip">PANELI KALDIR-INDIR(TIKLA)</div>
<div id="panel">Geleceği Yazıyorum</div>
</body>
</html>
TIKLA düğmesine tıkladıkça panel sırasıyla aşağıya inecek ve yukarıya çıkacaktır.
Yorumlar
Yorum Gönder