Süper Üye
Merhaba değerli Memoryhackers sakinleri, bugün sizlerle JQuery ile nesneleri gizleme ve gösterme nasıl yapılır,göstereceğim.
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("#kutu1").hide();
});
$("#button2").click(function(){
$("#kutu2").hide(1000);
});
$("#button3").click(function(){
$("#kutu3").hide("slow");
});
$("#button4").click(function(){
$("#kutu4").show();
});
$("#button5").click(function(){
$("#kutu5").show(1000);
});
$("#button6").click(function(){
$("#kutu6").show("fast");
});
$("#button7").click(function(){
$("#kutu7").toggle();
});
$("#button8").click(function(){
$("#kutu8").toggle(1000);
});
});
</script>
<style type="text/css">
td{ padding:5px;}
.kutu{ background-color:#0F6;}
#kutu4, #kutu5, #kutu6{ display:none;}
</style>
</head>
<body>
<table border="0">
<tr>
<td colspan="2">Nesneyi hemen gizleme</td>
</tr>
<tr>
<td width="100"><button id="button1">Buton 1</button></td>
<td width="150"><div id="kutu1" class="kutu">Kutu 1</div></td>
</tr>
<tr>
<td colspan="2">Nesneyi yavaşça gizleme (1 sn)</td>
</tr>
<tr>
<td><button id="button2">Buton 2</button></td>
<td><div id="kutu2" class="kutu">Kutu 2</div></td>
</tr>
<tr>
<td colspan="2">Nesneyi yavaşça gizleme (slow)</td>
</tr>
<tr>
<td><button id="button3">Buton 3</button></td>
<td><div id="kutu3" class="kutu">Kutu 3</div></td>
</tr>
<tr>
<td colspan="2">Gizli nesneyi görünür yapma</td>
</tr>
<tr>
<td><button id="button4">Buton 4</button></td>
<td><div id="kutu4" class="kutu">Kutu 4</div></td>
</tr>
<tr>
<td colspan="2">Nesneyi yavaşça gösterme (1 sn)</td>
</tr>
<tr>
<td><button id="button5">Buton 5</button></td>
<td><div id="kutu5" class="kutu">Kutu 5</div></td>
</tr>
<tr>
<td colspan="2">Nesneyi hızlıca gösterme (fast)</td>
</tr>
<tr>
<td><button id="button6">Buton 6</button></td>
<td><div id="kutu6" class="kutu">Kutu 6</div></td>
</tr>
<tr>
<td colspan="2">Toggle örneği</td>
</tr>
<tr>
<td><button id="button7">Buton 7</button></td>
<td><div id="kutu7" class="kutu">Kutu 7</div></td>
</tr>
<tr>
<td colspan="2">Toggle örneği (1 sn)</td>
</tr>
<tr>
<td><button id="button8">Buton 8</button></td>
<td><div id="kutu8" class="kutu">Kutu 8</div></td>
</tr>
</table>
</body>
</html>
