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:

javascript.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:

javascript.slideUp('slow' veya 'fast');

Eğer parametre belirtilmezse - animasyon olmaz, elemanlar anında gizlenir:

javascript.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:

javascript.slideUp(süre, [easing fonksiyonu], [callback fonksiyonu]);

Metoda, JavaScript nesnesi şeklinde, anahtar: değer çiftleri içeren çeşitli seçenekler iletebilirsiniz:

javascript.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:

javascript.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:

html<div>
  <button>hide text</button>
  <input type="text" value="aaa">
</div>
<div id="test"></div>

javascript$('button').click(function() {
  $(this).parent().slideUp('slow', function() {
    $('#test').text('Text is hidden');
  });
});

Ayrıca Bakınız