fadeOut Metodu

fadeOut metodu, elementleri yumuşak bir şekilde gizler. Elementleri fadeIn metoduyla opak hale getirerek gösterebilirsiniz.

Sözdizimi

Belirtilen sürede gizleme, varsayılan olarak 400ms:

javascript.fadeOut(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.fadeOut('slow' veya 'fast');

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

javascript.fadeOut();

İkinci 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.fadeOut(süre, [easing fonksiyonu], [callback fonksiyonu]);

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

javascript.fadeOut(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.fadeOut( {duration: 800, easing: easeInSine} );

Örnek

Aşağıdaki örnekte, #hide düğmesine tıklandığında #test elementi fadeOut metoduyla gizlenecek, #show düğmesine tıklandığında ise fadeIn metoduyla gösterilecektir. Ayrıca hızı 1000ms olarak ayarlayacağız:

html<button id="hide">gizle</button>
<button id="show">göster</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000);
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000);
});

Örnek

Aşağıdaki örnekte ise, #test elementinin gösterilmesi animasyonu bittikten sonra '!' metnini, gizlenmesi bittikten sonra ise '?' metnini içeren bir mesaj göstereceğiz:

html<button id="hide">gizle</button>
<button id="show">göster</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

Ayrıca Bakınız