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>
具体显示效果:
未点击:
点击之后显示效果: