jQuery效果 - 动画
方法
- animate()
语法
$(selector).animate({params},speed,callback);
代码
<!doctype html>
<html>
<head>
<title>jq动画</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
var donghua=$("#div");
donghua.animate({width:'500px',opacity:'0.3'},"slow");
donghua.animate({height:'500px',opacity:'0.5'},"slow");
donghua.animate({width:'100px',opacity:'0.7'},"slow");
donghua.animate({height:'100px',opacity:'1'},"slow");
});
$("#start").click(function(){
var donghua1=$("p");
donghua1.animate({fontSize:'+=1em'},"slow");
});
});
</script>
</head>
<body>
<input type="button" id="start" value="开始" "">
<div id="div" class="" style="background:#66ccff;width:100px;height:100px;position:absolute;">
<p>hello world!</p>
</div>
</body>
</html>
TIPS
默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative（相对）、fixed（固定） 或 absolute（绝对）。
978
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
