Jquery Ders-35 Fade Komutları
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Ders-35 Fade Komutları

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2853)
RAPOR ET
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.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol