jquery左右滑动效果实现

jquery左右滑动效果，主要使用animate方法：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery左右滑动效果的实现</title>
<script type="text/javascript" src="/Public/plugins/web/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
    $("#btn_a").click(function(){ $("#unit").stop(true,false).animate({"left":0},500); });
    $("#btn_b").click(function(){ $("#unit").stop(true,false).animate({"left":-300},500); })
});
</script>

<style type="text/css">
#box{width:300px; height:150px; margin-bottom:50px; position:relative; overflow:hidden;}
#unit{width:600px; position:absolute;}
#unit div{float:left; width:300px; height:150px;}
#bg_a{background-color:#F30;}
#bg_b{background-color:#F90;}
#btn_a,#btn_b{float:left; width:50px; padding-right:50px; cursor:pointer;}
</style>
</head>

<body>
<div>
    <div id="box">
        <div id="unit">
            <div id="bg_a">框一</div>
            <div id="bg_b">框二</div>
        </div>
    </div>
    <div id="btn_a">左</div>
    <div id="btn_b">右</div>
</div>
</body>
</html>

拷贝以上代码即可演示如果实现左右滑动；