关于jq左右滑动效果

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("#db1").click(function(){

	  if($("#db2").css('width') == '200px'){

		  $("#db2").animate({width:0},"slow");

		  $("#hide").val('显示');

	}else{

		$("#db2").animate({width:200},"slow");

		$("#hide").val('隐藏');

	}

});

});

</script>

<div style=" width:800px; height:600px; background:#CCCCCC; position:relative">

<div style="width:200px; height:30px; background:#00FF00; float:right; margin-top:40px;" id="db2">111</div>

<div style=" width:150px; height:100px; background:#006699; right:200px; top:20px; cursor:pointer; position: absolute" id="db1">点击<input type="hidden" id="hide"  value="隐藏" /></div>

</div>

效果没做对，绿色框应该是从右往左消失的，现在反了
而且总体感觉也不怎么对
------解决方案--------------------
你 db1 是绝对定位，层次比db2前,如果你要求两个要交叠,只能把 db2也用绝对定位，不交叠就是把db1向左移些

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("#db1").click(function(){

 

	if($("#db2").css('width') == '350px'){

		  $("#db2").animate({width:0  },"slow",function(){ $(this).hide() });

		  $("#hide").val('显示');

	}else{

		$("#db2").show().animate({width:350,display:'block'},"slow" );

		$("#hide").val('隐藏');

	} 

	

	

	

});

});

</script>

<div style=" width:800px; height:600px; background:#CCCCCC; position:relative; float:left">

<div style=" height:30px; background:#00FF00; margin-left:450px; width:350px; margin-top:40px;" id="db2">111</div>

<div style=" width:150px; height:100px; background:#006699; right:350px; top:20px; cursor:pointer; position: absolute" id="db1">点击<input type="hidden" id="hide"  value="隐藏" /></div>