JQury中设置元素自定义动画animate方法

来源：互联网发布：ssh 端口修改编辑：程序博客网时间：2024/05/23 01:58

jQuer中animate() 方法用于创建自定义动画，语法为：
animate({params},speed,callback);
其中params为必须属性，其它两个则为可选的属性。
params参数定义形成动画的 CSS 属性，即直接写元素的CSS属性；
speed 参数规定效果的时长，它可以取以下值："slow"、"fast" 或毫秒；
callback 参数是动画完成后所执行的函数名称。
值得注意的是，HTML的元素都是静止的，要让其运动则先设定其position位置，如下列：

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("div").animate({left:'100px',opacity:'0.5',top:'100px',height:'+=100px'},3000);
});
$("#button2").click(function(){
$("div").stop();
});
});
</script>
</head>
<body>
<button id="button1">开始动画</button><button id="button2">停止动画</button>
<div style="background:red;height:100px;width:100px;position:relative;"></div>
</body>
</html>

0 0