bhson

$(document).ready(function(){
	$(".gizle").click(function(){
		$(".gizle").animate({opacity:0}, 250).hide("slow");
		$(".goster").animate({opacity:1}, 250).show("normal");
		$(".sag-sutun").animate({marginRight:"-220px", opacity:0}, 250);
		$(".sol-sutun").animate({marginRight:"40px"}, 250);
	});
	$(".goster").click(function(){
		$(".gizle").animate({opacity:1}, 250).show("normal");
		$(".goster").animate({opacity:0}, 250).hide("slow");
		$(".sag-sutun").animate({marginRight:"30px", opacity:1}, 250 );
		$(".sol-sutun").animate({marginRight:"270px"}, 250);
	});
});
Her&#351;eyi bu &#351;ekilde yapt&#305;ktan sonra, a&#351;a&#287;&#305;daki gibi kodlara sahip olucakt&#305;n&#305;z;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery &#304;le "Gizle/G�ster" S�tun ve Tablo Yap&#305;m&#305;</title>
<script src="jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".gizle").click(function(){
		$(".gizle").animate({opacity:0}, 250).hide("slow");
		$(".goster").animate({opacity:1}, 250).show("normal");
		$(".sag-sutun").animate({marginRight:"-220px", opacity:0}, 250);
		$(".sol-sutun").animate({marginRight:"40px"}, 250);
	});
	$(".goster").click(function(){
		$(".gizle").animate({opacity:1}, 250).show("normal");
		$(".goster").animate({opacity:0}, 250).hide("slow");
		$(".sag-sutun").animate({marginRight:"30px", opacity:1}, 250 );
		$(".sol-sutun").animate({marginRight:"270px"}, 250);
	});
});
</script>
<style type="text/css">
.ana-tablo { overflow:hidden; position:relative; padding-bottom:10px; }
.sag-sutun { width:220px; float:right; overflow:hidden; padding-right:10px; margin-right:30px; }
.sag-sutun div { width:200px; padding:10px; margin-bottom:10px; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her taray&#305;c&#305;da �al&#305;&#351;maz!!!..*/ }
.sol-sutun { margin-right:270px; padding:10px; background:#fefee0; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her taray&#305;c&#305;da �al&#305;&#351;maz!!!..*/ }
.gizle, .goster { font-size:25px; position:absolute; top:0; right:10px; background:#000; color:#fff; padding:5px 5px 8px 5px; line-height:0.2em; cursor:pointer; overflow:hidden; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:5px; -webkit-border-radius:5px;/*Buraya CSS3! Her taray&#305;c&#305;da �al&#305;&#351;maz!!!..*/ }
.goster { display:none; }
</style>
</head>
<body>
<div class="ana-tablo">
<div class="gizle">&raquo;</div>
<div class="goster">&laquo;</div>
<div class="sag-sutun">
<div>...</div>
<div>...</div>
</div>
<div class="sol-sutun">...</div>
</div>
</body>
</html>