jQuery 效果- 动画
jQuery 动画 - animate() 方法
语法:
$(selector).animate({params},speed,callback);
- 必需的 params 参数定义形成动画的 CSS 属性。
- 可选的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。
- 可选的 callback 参数是动画完成后所执行的函数名称。
jQuery animate() 方法用于创建自定义动画
注意:
在默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。 如需对位置进行操作,要记得首先把元素的 CSS position
属性设置为 relative、fixed 或 absolute!
animate() - 操作多个属性
在生成动画时,可同时使用多个属性,也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=
使用队列功能
$(function() {
$("button").click(function() {
var div=$("div");
div.animate({height:'300px',opacity:'.4',},'slow');
div.animate({width:'300px',opacity:'.8',},'slow');
div.animate({height:'100px',opacity:'.4',},'slow');
div.animate({width:'100px',opacity:'.8',},'slow');
})
});
当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。同时,色彩动画并不包含在核心 jQuery 库中。
改变颜色插件引用地址
https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js
animate() - 使用相对值
定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
$("button").click(function(){
$("div").animate({
left:'150px',
height:'+=150px',//在元素当前值增加150px
width:'+=150px'
});
});
//可以把属性的动画值设置为 "show"、"hide" 或 "toggle"
$("button").click(function(){
$("div").animate({
height:'toggle' //高度可以上下滑动变化
});
});
//使用队列功能,可以编写多个animate()调用,逐一运行
$("button").click(function(){
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");
});
停止动画 stop()
stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画
//带文本
$("#start").click(function() {
var div =$("div");
div.animate({left:'250px'},3000);
div.animate({fontSize:'3em'},3000);
});
//语法:$(selector).stop(stopAll,goToEnd);
//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
//stop()仅停止正在活动的动画,还未活动的动画会继续完成
$("#stop").click(function() {
$("div").stop();
});
//stop(true)会停止所有的动画,无论是正在活动的还是未开始的
$("#allStop").click(function() {
$("div").stop(true);
});
//stop(true,true)会停止所有动画,且快速完成
$("#stop_action").click(function() {
$("div").stop(true,true);
})
});
<button id="start">开始</button>
<button id="stop">停止</button>
<button id="allStop">停止所有</button>
<button id="stop_action">停止动画,快速完成动作</button><br><br><br>
<!-- <div id="div1"></div>
<p id="text">jQuery</p> -->
<div style="background:#98bf21;height:100px;width:300px;position:absolute;margin-left: 20px;">HELLO</div>
回调函数Callback()
Callback 函数在当前动画 100% 完成之后执行。
使用回调函数
//在隐藏效果完全完成后弹出警告框
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落已被隐藏了");
});
});
没有使用回调函数
//警告框会在隐藏效果完成前弹出
$("button").click(function(){
$("p").hide(1000);
alert("现在已被隐藏了");
});
链(Chaining)
Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)
$("button").click(function(){
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
});