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:
.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:
.fadeOut('slow' veya 'fast');
Eğer parametre belirtilmezse - animasyon olmaz, elementler anında gizlenir:
.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:
.fadeOut(süre, [easing fonksiyonu], [callback fonksiyonu]);
Metoda, JavaScript nesnesi şeklinde, anahtar: değer çiftleri içeren çeşitli seçenekler iletilir:
.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:
.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:
<button id="hide">gizle</button>
<button id="show">göster</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#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:
<button id="hide">gizle</button>
<button id="show">göster</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
