54 jQuery-animate（）方法移动位置

69 阅读 0 评论 46 点赞

我是靠谱客的博主清爽茉莉，最近开发中收集的这篇文章主要介绍54 jQuery-animate（）方法移动位置，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.效果图

在这里插入图片描述

2.HTML代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>53 jQuery-animate（）方法移动位置</title>
    <style type="text/css">
           body{font-size:13px}
           .divFrame{border:solid 1px #666;
           width:168px;text-align:center;}
           .divFrame .divTitle{background-color:#eee;
           padding:5px 0px 5px 0px}
           .divFrame .divContent{width:108px;height:52px;
           padding:5px 0px 5px 0px;margin:0px 30px 0px 30px;
           overflow:hidden}
           .divFrame .divContent .divList{width:162px;
           position:relative}
           .divFrame .divContent .divList span{
           border:solid 1px #ccc;background-color:#eee;width:50px;
           height:50px;float:left;margin-right:2px}
           .btn {border:#666 1px solid;padding:2px;width:60px;
           filter: progid:DXImageTransform.Microsoft
           .Gradient(GradientType=0,StartColorStr=#ffffff,
           EndColorStr=#ECE9D8)}
    </style>
</head>
<body>
	 <div class="divFrame">
         <div class="divTitle">
              <input id="Button1" type="button"
                     value="左移" class="btn" />&nbsp;
              <input id="Button2" type="button"
                     value="右移" class="btn" />
         </div>
         <div class="divContent">
              <div class="divList">
                   <span>1</span>
                   <span>2</span>
                   <span>3</span>
              </div>
         </div>
     </div>
	
              
<script src="../jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		//左移按钮点击事件
		$("input:eq(0)").click(function(){
			//在3000毫秒内，以动画的形式向左移动52像素
			$(".divList").animate({left:"-=52px"}, 3000);
		})
		//右移按钮点击事件
		$("input:eq(1)").click(function(){
			//在3000毫秒内，以动画的形式向右移动52像素
			$(".divList").animate({left:"+=52px"}, 3000);
		})
	})
</script>
</body>
</html>