Jquery derslerimize devam ediyoruz.Bu dersimizde fade komutlarını anlatacağım.Fade komutları show-hide ve slide komutları gibi gizleme ve gösterme işine yarıyor.Fade komutlarının farkı gösterme animasyonları opaklığı düşürerek veya artırarak.Kodları anlatarak başlayalım.
1-fadeIn(sure,bitis)
FadeIn objeyi göstermemize yarıyor.Süre parametresi animasyonun süresi.
1000=1 saniye.Bitiş ise animasyon bitince olacak işlemler.Diğer kodlarımızda da mevcut bu olay ama kullanılması zorunlu değil.
fadeIn(1500,function(){
//animasyon bittikten sonraki işlemler.
})
2-fadeOut(sure,bitis)
FadeOut ise objeyi gizlememize yarıyor.Parametreler yukardakiyle aynı.
fadeOut(500,function(){
//animasyon bittikten sonraki işlemler.
})
3-fadeToggle(sure,bitis)
FadeToggle ise obje gizli ise gösterir,görünür ise gizler.Parametreler gene aynı.
fadeToggle(3000,function(){
//animasyon bittikten sonraki işlemler.
})
4-fadeTo(sure,oran,bitis)
FadeTo ise opaklığı belirlediğimiz miktara animasyonlu şekilde getirmemize yarıyor.Oran diye belirttiğim parametre opaklık miktarı.0-1 arası değerler alıyor.0 gizli 1 görünür.
fadeTo(1000,0.5,function(){
//animasyon bittikten sonraki işlemler.
})
0.5 diyerek opaklığı yarıya indirdik.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".kutu").fadeIn(1500).fadeOut(2000).fadeToggle(1000).fadeTo(500,0.6,function(){ alert("animasyonlar bitti"); })
});
</script>
<style type="text/css">
.kutu{display:none;width:250px;height:250px;background:#666;}
</style>
</head>
<body>
<div class="kutu"></div>
</body>
</html>
Yukarıda gizli objeyi gösterdik sonra tekrar gizledik sonra tekrar gösterdik en son ise opaklığı 0.6 düşürüp alert ile animasyon bitti dedik.Genel Kullanımı bu şekilde.
UstaDerslik
