1、
aninmate()方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
params参数定义形成动画的CSS属性，可选的speed参数规定效果的时长，可取的值有“slow”,"fast","毫秒"；callback参数是动画完成后所需要执行的函数名称。
下面的例子演示animate()方法的简单应用，它把<div>元素进行左移。
注：在实际效果中，你会觉得<div>元素在向右移动，但代码设计的是left:'250px',向左移动，其实造成这种错觉的是自己设置的left值太大，而div元素移动是相对于<div class="box">的定位进行的，所以他会向左移动。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>jQuery控制元素动画运动</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-3.2.1.min.js"></script>
<style>
.box{
width:100px;
height:100px;
background:#555;
position:absolute;
}
</style>
</head>
<body>
<div>
<p>在进行运动设置时，需要设置他的postion是relative或者absolute或者fixed</p>
<button type="button">点击运动开始</button><br><br>
<div class="box"></div>
</div>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({left:'250px'},"slow");
})
})
</script>
</body>
</html>
默认的，所有HTML元素都有一个静态位置，且无法移动，如需对位置操作，需要先把元素的CSS position属性设置位relative，fixed，absolute.
2、
animate()方法可以定义多种动画属性。代码如下图所示：
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-3.2.1.min.js"></script>
<style>
.mainBox{
width:100px;
height:100px;
background:#3b3b3b;
position:absolute;
}
</style>
</head>
<body>
<div>
<p>使用位置变化时，可以使用position中的relative,absolute,fixed等进行定位操作，然后进行位置转换</p>
<button type="button">点击进行动作操作</button><br><br>
<div class="mainBox"></div>
</div>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".mainBox").animate({
left:'250px',
width:'150px',
height:'150px',
opacity:0.3
})
})
})
</script>
</body>
</html>
运行前效果如图所示：
运行后的效果如下图所示：
注：当使用animate（)方法时，必须使用camel标记法书写属性名，比如使用paddingLeft而不是padding-left等，色彩动画不包括在jQuery中，如果需要生成颜色值，需要从jQuery.com下载Color Animations插件。
3、jQuery使用相对值，主要代码如下所示：
<script>
$(document).ready(function(){
$("button").click(function(){
$(".mainContent").animate({
left:'230px',
width:'+=150px',
height:'+=150px'},"slow");
});
});
</script>
显示效果如下图所示:
第一次点击
第二次点击
4、animate()使用预定义的值，核心代码如下图所示，引入<script src="js/jquery-3.2.1.min.js"></script>文件：
$(document).ready(function(){
$("button").click(function(){
$(".mainContent").animate({
height:"toggle",
width:"toggle"
});
});
});
<p>使用animate进行预定义值的使用</p>
<button type="button">点击按钮进行高度显示或者隐藏</button><br><br>
<div class="mainContent"></div>
截图如下所示：
点击按钮进行效果如下图所示：
注：可以把属性的动画值设置为"show","hide"或"toggle"
5、jQuery中的animate()提供针对动画的队列功能，这意味着如果在彼此之后编写多个animate()调用，jQuery会创建包含这些方法调用的内部队列，然后逐一进行animate调用。
主代码如下所示：
$(document).ready(function(){
$("button").click(function(){
var content = $(".mainContent");
content.animate({height:'300px',opacity:'0.4'},"slow");
content.animate({width:'300px',opacity:'0.8'},"slow");
content.animate({height:'100px',opacity:'0.4'},"slow");
content.animate({width:'100px',opacity:'0.8'},"slow");
})；
})；
<p>使用animate（）方法队列功能，进行动画的效果展示</p>
<button type="button">点击动画开始</button><br><br>
<div class="mainContent"></div>
效果展示如下所示：原始动态
点击按钮：第一步
第二步：
第三步：
第四步：
动画完成回到初始状态：
注：可以使用队列进行动画不同效果的展示，比如框向右移动，其中字体变大，主要代码如下所示：
$(document).ready(function(){
$("button").click(function(){
var main = $(".content");
main.animate({left:'200px'},"slow");
main.animate({fontSize:'24px'},"slow");
});
});
<div>
<p>使用jQuery做animate队列动画</p>
<button type="button">点击进行动画展示</button><br><br>
<div class="content">自信的活着</div>
</div>
具体显示效果：
未点击：
点击之后显示效果：
157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
