Bu yazımızda jQuery’de slideDown, slideUp ve slideToggle metodları ile Html öğelerini efektif olarak aşağı-yukarı olacak şekilde nasıl açılır-kapanır yapabiliriz onu öğreneceğiz.
Şimdi sırasıyla bu metodların ne işe yaradığını ve nasıl kullanıldığını inceleyelim.
Daha sonra da tüm metodları aynı anda içeren bir uygulama yapalım. Böylece metodların birbirinden farkını daha iyi anlayabiliriz.
jQuery slideDown() Metodu
slideDown() metodu: slideDown() metodu ile gizlediğimiz Html öğesini efektif bir şekilde aşağı doğru açarak görünür hale getirebiliriz. 3 farklı kullanım şekli vardır:
1 Herhangi bir parametre vermeden yani slideDown() şeklinde kullanırsak bu metodu uyguladığımız Html öğesi efektif bir şekilde aşağı doğru görünür hale gelir.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").slideDown(); }); </script> |
2 Milisaniye türünden parametre verebiliriz. Örneğin Html öğesinin görünmesinin 3 saniyede gerçekleşmesini istiyorsak parametre olarak 3000 değeri vermeliyiz.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").slideDown(3000); }); </script> |
3 Son olarak rakamsal değer vermek yerine “slow”, “normal”, “fast” parametrelerinden birini vererek efektlerimizi yavaş, normal veya hızlı bir şekilde gerçekleştirebiliriz.
Örneğin yavaş bir efekt vermek istiyorsak:
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").slideDown("slow"); }); </script> |
jQuery slideUp() Metodu
slideUp() metodu: slideUp() metodu ile seçtiğimiz Html öğesini efektif bir şekilde yukarı doğru kapatarak gizleyebiliriz. 3 farklı kullanım şekli vardır:
1 Herhangi bir parametre vermeden yani slideUp() şeklinde kullanırsak bu metodu uyguladığımız Html öğesi efektif bir şekilde yukarı doğru gizlenir.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").slideUp(); }); </script> |
2 Milisaniye türünden parametre verebiliriz. Örneğin Html öğesinin gizlenmesinin 3 saniyede gerçekleşmesini istiyorsak parametre olarak 3000 değeri vermeliyiz.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").slideUp(3000); }); </script> |
3 Son olarak rakamsal değer vermek yerine “slow”, “normal”, “fast” parametrelerinden birini vererek efektlerimizi yavaş, normal veya hızlı bir şekilde gerçekleştirebiliriz.
Örneğin yavaş bir efekt vermek istiyorsak:
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").slideUp("slow"); }); </script> |
jQuery slideToggle() Metodu
slideToggle() metodu: slideToggle() metodu ile seçtiğimiz Html öğesini görünür durumdaysa gizleyebilir, gizli durumdaysa görünür hale getirebiliriz. Yani Gizle-Göster, Göster-Gizle işlevi görür. 3 farklı kullanım şekli vardır:
1 Herhangi bir parametre vermeden yani slideToggle() şeklinde kullanırsak bu metodu uyguladığımız Html öğesi gizli durumdaysa görünür, görünür durumdaysa gizlenir.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").slideToggle(); }); </script> |
2 Milisaniye türünden parametre verebiliriz. Örneğin Html öğesinin gizlenmesinin veya görünmesinin 3 saniyede gerçekleşmesini istiyorsak parametre olarak 3000 değeri vermeliyiz.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").slideToggle(3000); }); </script> |
3 Son olarak rakamsal değer vermek yerine “slow”, “normal”, “fast” parametrelerinden birini vererek efektlerimizi yavaş, normal veya hızlı bir şekilde gerçekleştirebiliriz.
Örneğin yavaş bir efekt vermek istiyorsak:
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").slideToggle("slow"); }); </script> |
Artık bu metodları içerisinde barındıran uygulamamıza geçebiliriz.
Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="box"></div> <button id="slideDown">slideDown( )</button> <button id="slideUp">slideUp( )</button> <button id="slideToggle">slideToggle( )</button> <button id="slideDown-3000">slideDown(3000)</button> <button id="slideUp-3000">slideUp(3000)</button> <button id="slideToggle-3000">slideToggle(3000)</button> <button id="slideDown-slow">slideDown("slow")</button> <button id="slideUp-slow">slideUp("slow")</button> <button id="slideToggle-slow">slideToggle("slow")</button> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#box { width: 100%; height: 200px; background-color: blueviolet; } button { margin: 10px 10px 10px 0px; padding: 6px 12px; } |
jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> $(document).ready(function() { $("#slideDown").click(function() { $("#box").slideDown(); }); $("#slideUp").click(function() { $("#box").slideUp(); }); $("#slideToggle").click(function() { $("#box").slideToggle(); }); $("#slideDown-3000").click(function() { $("#box").slideDown(3000); }); $("#slideUp-3000").click(function() { $("#box").slideUp(3000); }); $("#slideToggle-3000").click(function() { $("#box").slideToggle(3000); }); $("#slideDown-slow").click(function() { $("#box").slideDown("slow"); }); $("#slideUp-slow").click(function() { $("#box").slideUp("slow"); }); $("#slideToggle-slow").click(function() { $("#box").slideToggle("slow"); }); }); |
Gördüğünüz gibi slideUp, slideDown ve slideToggle metodlarını 3 farklı şekilde kullandık. Aşağıdaki uygulama üzerinde butonlara tıklayarak efektleri inceleyebilirsiniz.
Son olarak şunu söylemek istiyorum:
Bu metodların arka planda neler yaptığını bilmemizde de fayda var.
Burada div etiketi gizlendiğinde tarayıcıda sağ tıklayıp incele derseniz, div’in display değerinin none olarak değiştiğini görebilirsiniz.
⇒ Div Görünür Durumdayken
⇒ Div Gizli Hale Geldiğinde
Umarım “jQuery slideDown(), slideUp(), slideToggle() Metodları ve Kullanımları” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
jQuery hide(), show(), toggle() Metodları ve Kullanımları
jQuery fadeOut(), fadeIn(), fadeToggle(), fadeTo() Metodları ve Kullanımları
Yeni bir yazımda görüşmek üzere.
, slideUp(), slideToggle() Metodları ve Kullanımları){kind=link}