1.布局设置
<body>
<button >动画演示</button>
<div style="width:86px; height:68px; background-color:pink;position:absolute; top: 80px; left: 7px;"></div>
</body>
2.函数设置:单击button按钮进行动画显示效果
<script src="Script/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("div").animate({left:'250px'});
});
});
</script>
3.全部html如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Script/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button >动画演示</button>
<div style="width:86px; height:68px; background-color:pink;position:absolute; top: 80px; left: 7px;"></div>
</body>
</html>
附加其他几种效果:看注释
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
// $("div").animate({left:'250px'}); //划到距离左侧250px
//$("div").animate({ height: 'toggle' })//上下高度滑动
//$("div").animate({ width: 'toggle' }); //左右宽度滑动
var div = $("div");
div.animate({ width: '400px', opacity: '0.4' }, "slow");
div.animate({ height: '300px', opacity: '0.9' }, "slow");
div.animate({ width: '300px', opacity: '0.7' }, "slow");
div.animate({ height: '233px', opacity: '0.2' }, "fast");
});
});