slideUp Metodu
slideUp metodu, elemanları aşağıdan yukarıya doğru kaydırarak yumuşak bir şekilde gizler.
Elemanları göstermek için
slideDown metodunu kullanabilirsiniz.
Sözdizimi
Belirli bir sürede gizleme,
varsayılan olarak 400ms:
.slideUp(süre);
Süre sadece milisaniye cinsinden değil,
slow (600ms)
ve fast (200ms) anahtar kelimeleriyle de belirtilebilir.
Değer ne kadar büyükse, animasyon o kadar yavaş olur:
.slideUp('slow' veya 'fast');
Eğer parametre belirtilmezse - animasyon olmaz, elemanlar anında gizlenir:
.slideUp();
Ayrıca ikinci parametre olarak bir easing fonksiyonu, üçüncü parametre olarak da bir callback fonksiyonu - animasyon tamamlandıktan sonra çalışır - iletebilirsiniz. Her iki parametre de isteğe bağlıdır:
.slideUp(süre, [easing fonksiyonu], [callback fonksiyonu]);
Metoda, JavaScript nesnesi şeklinde, anahtar: değer çiftleri içeren çeşitli seçenekler iletebilirsiniz:
.slideUp(seçenekler);
Böyle bir nesne aşağıdaki parametreleri
ve fonksiyonları iletebilir - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Bu parametrelerin
açıklamalarını
animate metodu için inceleyebilirsiniz. Örneğin,
süreyi ve easing fonksiyonunu ayarlayalım:
.slideUp( {duration: 800, easing: easeInSine} );
Örnek
Hadi butona tıklandıktan sonra, input'u
ve butonu içeren üst div'i,
slideUp metoduyla yumuşak bir şekilde gizleyelim (bu
div'i
parent metoduyla bulacağız).
slow anahtar kelimesini ileterek
hızı 600ms olarak ayarlayacağız. #test id'li
div içine 'Text is hidden' yazısını yazdıracağız:
<div>
<button>hide text</button>
<input type="text" value="aaa">
</div>
<div id="test"></div>
$('button').click(function() {
$(this).parent().slideUp('slow', function() {
$('#test').text('Text is hidden');
});
});
Ayrıca Bakınız
-
slideDownmetodu,
elemanları yumuşak bir şekilde gösterir -
slideTogglemetodu,
elemanların yumuşak gösterim/gizlemesini değiştirir -
fadeOutmetodu,
elemanları yumuşak bir şekilde şeffaflaştırarak gizler -
hidemetodu,
elemanları yumuşak bir şekilde gizler