<!DOCTYPE html>
<html lang="en" class="loading">
<head>
<meta charset="UTF-8">
<title>animate方法</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
$(function(){
/* show()方法和hide()方法会同时修改元素的多个样式属性，即高度、宽度和不透明度:
fadcOut()方法和fadeln()方法只会修改元素的不透明度:
slideDown()方法和slideUp()方法只会改变元素的高度.
animate方法的标准格式:要使用此方式的前提是被操作的元素必须有position属性，否则没效果
animate(params, speed,callback);
*/
$(".panel").click(function(){
//点击元素后在1秒内向右移动300px的同时元素高度增加到200px，不刷新页面的情况下再次点击元素不会再移动
$(this).animate({left:"300px",height:"200px"},1000);
//不刷新页面的前提下，再次点击元素时在上一次位置的基础上向右移动300px，不是向左
//$(this).animate({left:"+=300px"},1000);
});
});
</script>
</head>
<body>
<div class="panel" style="width: 100px; height: 100px;margin: 100px; background: #647787; position: relative;" ></div>
</body>
</html>