Kodları Dene butonuna tıklayarak nasıl çalıştığını görebilir, kodları değiştirip sonucu görebilirsin.
jQuery Kısmı:
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("#kutu1").fadeIn();
$("#kutu2").fadeIn("slow");
$("#kutu3").fadeIn(3000);
});
$("#button2").click(function(){
$("#kutu1").fadeOut();
$("#kutu2").fadeOut("slow");
$("#kutu3").fadeOut(3000);
});
$("#button3").click(function(){
$("#kutu1").fadeToggle();
$("#kutu2").fadeToggle("slow");
$("#kutu3").fadeToggle(3000);
});
$("#button4").click(function(){
$("#kutu1").fadeTo( "fast", 0.3);
$("#kutu2").fadeTo("slow",0.6);
$("#kutu3").fadeTo(3000, 0.5);
});
});
</script>
Html Kısmı:
<table border="0">
<tr>
<td width="130"><button id="button1">fadeIn Metodu</button></td>
<td width="150" rowspan="4">
<div id="kutu1" class="kutu">Kutu 1</div><br/>
<div id="kutu2" class="kutu">Kutu 2</div><br/>
<div id="kutu3" class="kutu">Kutu 3</div><br/>
</td>
</tr>
<tr>
<td><button id="button2">fadeOut Metodu</button></td>
</tr>
<tr>
<td><button id="button3">fadeToggle Metodu</button></td>
</tr>
<tr>
<td><button id="button4">fadeTo Metodu</button></td>
</tr>
</table>