语法结构
animate(params,speed,callback)
params：包含一个样式属性及值的映射。比如{property1:‘value1‘,property:‘value2‘,......}
speed：速度参数，可选。
callback：在动画完成时执行的函数，可选
1、自定义简单动画，使元素在3秒（3000毫秒），向右移动500像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#panel{
position: relative;
width: 100px;
height: 100px;
border:1px solid black;
background: red;
cursor: pointer;
opacity: 0.5;
}
</style>
<script type="text/javascript" src=‘jquery-3.2.1.min.js‘></script>
<script type="text/javascript">
$(function(){
$(‘#panel‘).click(function(){
$(this).animate({left:‘500px‘},3000)
});
});
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>
2、累加、累减动画
‘-=‘或者‘+=‘表示在当前位置累加或者累减
$(function(){
$(‘#panel‘).click(function(){
$(this).animate({left:‘+=500px‘},3000)
});
});
3、多重动画
1）、同时执行多个动画
$(function(){
$(‘#panel‘).click(function(){
$(this).animate({left:‘+=500px‘,height:‘200px‘},3000);
});
});
2）、按顺序执行多个动画
$(function(){
$(‘#panel‘).click(function(){
$(this).animate({left:‘+=500px‘},3000).animate({height:‘200px‘},3000);
});
});
4、综合动画
单击div元素，让他向右移动的同时增加他的高度，并将不透明从50%变成100%，然后在从上到下移动，同时他的宽度变大，当完成这些效果后，让他以淡出的方式隐藏
$(function(){
$(‘#panel‘).click(function(){
$(this).animate({left:‘500px‘,height:‘200px‘,opacity:‘1‘},3000).animate({top:‘100px‘,width:‘200px‘},3000).fadeOut(3000);
});
});
5、回调函数
最后一步切换div的CSS样式
$(function(){
$(‘#panel‘).click(function(){
$(this).animate({left:‘500px‘,height:‘200px‘,opacity:‘1‘},3000).animate({top:‘100px‘,width:‘200px‘},3000,function(){
$(this).css(‘border‘,‘10px solid black‘);
});
});
});
时间： 2024-07-29 01:41:57