您的位置：首页 > Web前端 > JQuery

jquery学习之自定义动画

2015-09-12 23:48 681 查看

<!DOCTYPE html>
<!--animate() 方法允许您创建自定义的动画
主要的函数：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jquery创建自定义动画</title>
<script src="../res/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'500px'},"slow");
div.animate({fontSize:'4em'},"slow");
div.fadeOut(10);
/*var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");*/

});

});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">中药O2O</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航