jQuery Fonksiyonlar Ders 2
Merhaba,
Bu dersimizde jQuery kullarak elementlere efekt vermeyi işleyeceğiz. Bunlar görünür yapma, sağa sola kaydırma, büyültme küçültme vs vs gibi efektler olacak.
Bir önceki dersimizde en son verdiğimiz örnek üzerinden yürüyelim.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function ( ) { $("div").hide() )}; </script> |
Yukarıdaki örnekte div elementini gizlemeyi göstermiştim. Tekrar göstermek için ise show() fonksiyonunu kullanacağız. Yani ;
|
1 |
$(“div”).show() |
Gördüğünüz üzere div i seçtik ve show methodu ile gösterdik. Peki bu yapı sayfamızda bulunan tüm divleri kapsayacak ise ki öyle ve biz sadece belli bir div açılsın ya da kapansın istiyor isek yine css bilgilerimize başvuruyor ve id özelliğini kullanıyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<head> <script> $(document).ready(function ( ) { $("#deneme").hide() )}; </script> </head> <body> <div id =”deneme”> </div> <body> |
Sayfa açıldığında deneme id li divimiz otomatik olarak hide olacak. Buraya kadar herşey normal. Peki biz bu işlemi bir click event’a bağlayabilirmiyiz. Tabi ki bağlayabiliriz. Yani bir tuşa basıldığında divimiz kaybolsun.
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function (){ $("button").click(function() { $("div").hide(); }); }); |
Buttona click event atadık ve bu event içerisine git divi hide yap dedik. Dikkat ettiyseniz herhangi bir button ve herhangi bir div. Şimdi biraz daha spesifikleştirelim.
|
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 |
<head> <script> $(document).ready(function (){ $("#gizleyecekbutton").click(function() { $("#gizlenecekdiv").hide(); }); }); </script> </head> <body> <button id="gizleyecekbutton"> gizle </button> <div id="gizlenecekdiv">divimiz burada </div> </body> |
Yazdığımız kod doğrultusunda biz gizle sekmesine bastığımızda divimiz bir anda ortadan kaybolacaktır. Eğer bu ortadan kaybolma işlemini yavaş yavaş yapalım istiyor isek hide() fonksiyonunun içerisine süre belirtebiliriz.
Örn ;
Hide(500) süre birimi ms dir. Yukarıdaki örneğe bir ekleme daha yapalım ve show() fonksiyonunuda kullanalım.
|
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 |
<head> <script> $(document).ready(function (){ $("#gizleyecekbutton").click(function() { $("#gizlenecekdiv").hide(800); $("#gizlenecekdiv").show(800); }); }); </script> </head> <body> <button id="gizleyecekbutton"> gizle </button> <div id="gizlenecekdiv">divimiz burada </div> </body> |
Bu örnekte olduğu gibi eğer gizle sekmesine tıklar isek önce yavaş yavaş divimiz gizlenecek sonrada tekrar aynı hızla görünecektir.
Peki biz bu işlemi her button’a bastığımızda yapalım diyorsak ? ozaman da yardımımıza toggle() fonksiyonu koşmaktadır.
Yani ;
|
1 |
$("#gizlenecekdiv").toggle(800); |
Click eventimizi bu şekilde düzenler isek bastığımızda yavaş yavaş görünmez olacak tekrar bastığımızda yavaş yavaş görünür olacaktır.
Bu dersimizde jQuery fonksiyonlarına giriş yaptık. Bir sonraki dersimizde biraz daha derinlere ineceğiz.
İyi Günler Dilerim,
Cevapla
Want to join the discussion?Feel free to contribute!