fadeIn Metodu
fadeIn metodu, gizli elementleri
opak hale getirerek yumuşak bir şekilde
gösterir. Elementleri
fadeOut
metoduyla şeffaf yaparak gizleyebilirsiniz.
Sözdizimi
Belirli bir sürede gösterme,
varsayılan olarak 400ms:
.fadeIn(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:
.fadeIn('slow' veya 'fast');
Parametre belirtilmezse - animasyon olmaz, elementler anında gösterilir:
.fadeIn();
İkinci parametre olarak easing fonksiyonu, üçüncü parametre olarak da callback fonksiyonu - animasyon tamamlandıktan sonra çalışır - iletebilirsiniz. Her iki parametre de isteğe bağlıdır:
.fadeIn(süre, [easing fonksiyonu], [callback fonksiyonu]);
Metoda, JavaScript nesnesi şeklinde, anahtar: değer çiftleri içeren çeşitli seçenekler iletilir:
.fadeIn(seçenekler);
Böyle bir nesne şu 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:
.fadeIn( {duration: 800, easing: easeInSine} );
Örnek
Aşağıdaki örnekte, #hide düğmesine tıklandığında
#test elementi fadeOut metodu
kullanılarak gizlenecek,
#show düğmesine tıklandığında ise
fadeIn metodu kullanılarak 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 elementini
gösterme animasyonu tamamlandıktan sonra
'!' metnini içeren bir mesaj,
gizleme işleminden 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('?');
});
});
