jQuery Animasyonlar
Bir nesnenin stilinde yapacağımız değişiklikleri animasyon şeklinde yapar.
Kullanım: .animate(özellikler, hız);
ÖRNEK 1
JAVASCRIPT Kodu
<div id="d1a" class="kutu">Aşağıdaki kutunun yüksekliğini 50 piksel yap!</div>
<div id="d1b" class="kutu2"> </div>
<script>
$("#d1a").click(function(){
$("#d1b").animate({height: '50px'});
});
</script><br /><br /><br />
Aşağıdaki kutunun yüksekliğini 50 piksel yap!
ÖRNEK 2
Birden fazla değişikliği tek bir animate() ile yapabiliriz:
JAVASCRIPT Kodu
<div id="d2a" class="kutu">Aşağıdaki kutuyu ayrıca transparan yap!</div>
<div id="d2b" class="kutu2"> </div>
<script>
$("#d2a").click(function(){
$("#d2b").animate({
height: '50px',
opacity: '0.5'
});
});
</script><br /><br /><br />
Aşağıdaki kutuyu ayrıca transparan yap!
ÖRNEK 3
Elementin özelliği üzerinden işlem yapabiliriz.
JAVASCRIPT Kodu
<div id="d3a" class="kutu">Aşağıdaki kutunun yüksekliğini 50 arttır</div>
<div id="d3b" class="kutu2"> </div>
<script>
$("#d3a").click(function(){
$("#d3b").animate({
height: '+=50px'
});
});
</script><br /><br /><br />
Aşağıdaki kutunun yüksekliğini 50 arttır
ÖRNEK 4
Ayrıca hide, show ve toggle kullanılabilir (özellik olarak).
JAVASCRIPT Kodu
<div id="d4a" class="kutu">Aşağıdaki kutuyu gizle/göster</div>
<div id="d4b" class="kutu2"> </div>
<script>
$("#d4a").click(function(){
$("#d4b").animate({
height: 'toggle'
});
});
</script><br /><br /><br />
Aşağıdaki kutuyu gizle/göster
ÖRNEK 5
Belli işlemleri sırasıyla yapıp animasyon oluşturmasını sağlayabiliriz.
JAVASCRIPT Kodu
<div id="d5a" class="kutu">Aşağıdaki kutuyu oynat</div>
<div id="d5b" class="kutu2"> </div>
<script>
$("#d5a").click(function(){
var div=$("#d5b");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
</script><br /><br /><br />
Aşağıdaki kutuyu oynat
ÖRNEK 6
Yazı tipi boyutu ile ilgili oynamalar için fontSize kullanılmalıdır.
JAVASCRIPT Kodu
<div id="d6a" class="kutu">Aşağıdaki yazının boyutunu arttır</div>
<div id="d6b" class="kutu2">Merhaba Dünya!</div>
<script>
$("#d6a").click(function(){
var div=$("#d6b");
div.animate({fontSize:'3em'},"slow");
});
</script><br /><br /><br />
Aşağıdaki yazının boyutunu arttır
Merhaba Dünya!