JQuery Animasyonlar

<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 />

<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 />

<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 />

<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 />

<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 />

<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 />