jQuery动画效果相关方法

平民王子 · 发表于 2013-2-8 00:42:18

动画效果相关的方法<html> <head> <base href="<%=basePath%>"> <title> 动画效果相关的方法</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript" src="js/jquery-1.4.3.js"></script><style type="text/css">div {background-color: #cccccc;border: 2px solid black;width: 200px;height: 120px;}</style> </head><body><input type="button" value="toggle" /><br /><div id="test1">使用toggle控制的元素</div><input type="button" value="slide down" /><input type="button" value="slide up" /><br /><div id="test2">使用Slide动画控制的元素</div><input type="button" value="fade in" /><input type="button" value="fade out" /><br /><div id="test3">使用Fade动画控制的元素</div></body></html> 动画效果相关的方法二<html> <head> <base href="<%=basePath%>"> <title>动画效果相关的方法二</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript" src="js/jquery-1.4.3.js"></script><style type="text/css">div {background-color: #cccccc;border: 2px solid black;width: 200px;height: 120px;}</style> </head><body><input id="bn1" type="button" value="执行动画" /><br /><div id="test1">使用toggle控制的元素</div><script type="text/javascript">//为id为bn1的按钮绑定事件处理函数$("#bn1").click(function() {//为id为test1的元素指定自定义动画$("#test1").animate(//下面JavaScript对象指定动画结束时目标元素的状态{fontSize : "24pt",width : "300px",opacity : 05},//下面对象指定动画详细选项{duration : 800,easing : "swing",step : function() {alert('step回调！');}})});</script></body></html>

		自动登录	找回密码
密码			立即注册