JQuery Slide Efekti Uygulama
JQuery ile nesnelerin aşağı doğru genişleyerek açılmasını ya da yukarı doğru kapanarak gizlenmesini sağlayabiliriz.
Slide metodunun 3 farklı varyasyonu olup, kullanım şekli hem birbirleriyle hem de diğer konularda işlediğimiz metotlar ile aynıdır:
$(selector).slideMetodu( hız, callbackFonksiyonu );
Parametreler isteğe bağlıdır. Efekt hızını belirlemek için slow, fast veya milisaniye cinsinden süre verilebilir. Callback fonksiyonları ise önceki konumuzda anlatılmıştır.
Slide metotlarını inceleyelim:
slideDown() Metodu
Gizlenmiş durumdaki bir nesnenin aşağı doğru genişleyerek açılmasını sağlar.
Örnek: Aşağıdaki örnekte slideDown metodu 3 farklı şekilde kullanılmıştır.
$("#button1").click(function(){
$("#kutu1").slideDown();
$("#kutu2").slideDown("slow");
$("#kutu3").slideDown(3000);
});
slideUp() Metodu
Nesnelerin yukarı doğru kapanarak gizlenmesini sağlar.
Örnek:
$("#button1").click(function(){
$("#kutu1").slideUp();
$("#kutu2").slideUp("slow");
$("#kutu3").slideUp(3000);
});
slideToggle() Metodu
Bağlandığı nesne görünür ise kapanmasını, gizli ise açılmasını sağlar.
Örnek:
$("#button1").click(function(){
$("#kutu1").slideToggle();
$("#kutu2").slideToggle("slow");
$("#kutu3").slideToggle(3000);
});
jquery slide examples, jquery slide örnekleri, jquery bir nesneyi kapanarak yok etme, açılarak gösterme
KONU İLE İLGİLİ ÖRNEKLER
|
JQuery slide ve callback metodu kullanarak sekmeli panel örneği
|
Kendin Dene
|
Kendin Dene butonuna tıklayarak kodları görebilir ve değiştirebilirsin.
Kendin Dene butonuna tıklayarak kodları görebilir ve değiştirebilirsin.
7301 kez okundu.