<!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实现左右滑动的问题</title>
<script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#hide").click(function(){
if($("#left").css('width') == '200px'){
$("#left").animate({width:0},"slow");
$("#hide").val('显示');
}else{
$("#left").animate({width:200},"slow");
$("#hide").val('隐藏');
}
});
});
</script>
<div id="left" style="width:200px; background-color:#009900; float:left;"> </div>
<div id="right" style="width:400px; background-color: #FF0000; float:left;"> </div>
<div style="float:left">
<input id="hide" type="button" value="隐藏" />
</div>
</body>
</html>
