JQuery动画

第一章:动画基础显示和隐藏

1. hide( )

js中隐藏元素ele.style.display = 'none' jquery中从显示到隐藏元素调用hide方法 $ele.hide()

hide( ) 方法中还可以传递参数,.传参之后,hide()就会成为一个动画方法。.hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作.

1
2
3
4
5
1:
//实现所有的li元素在隐藏的时候有一个渐变的效果,
//这是一个动画设置的快捷方式,'fast' 和 'slow' 分别代表200和600毫秒的延时,就是元素会执行200/600毫秒的动画后再隐藏
//也可以直接传入毫秒数, .hide(3000)
$('li').hide('fast'/'slow');

2. show( )

让元素从隐藏到显示,用法和hide( )一样.

1
2
//让元素执行3秒的隐藏动画,然后执行3秒的显示动画。
$('elem').hide(3000).show(3000)

3. toggle( )

用于切换显示或者隐藏匹配的元素.

1.基本操作:

​ 处理元素显示或者隐藏,没有动画效果

​ 若匹配元素原先是显示则会隐藏,

​ 原先是隐藏,则会显示.

2.提供参数:

.toggle( [duration],[complete])

​ 参数1:周期(多长时间完成动画效果)

​ 参数2:回调函数(动画执行完之后执行的函数)

​ 同样是改变元素的高,宽,不透明度的一系列动画效果.

1
2
3
4
5
6
7
8
9
10
11
12
13
//鼠标移入第一个按钮,将class名为left的元素在3秒内隐藏,隐藏完之后打印出'a';
$('button:first').on('mouseover',function(){
$('.left').toggle(3000,function () {
console.log('a');
})
});

//隐藏之后,再3秒内又显示
$('button:first').on('mouseover',function(){
$('.left').toggle(3000,function () {
$('.left').toggle(3000);
})
});

3.直接定位:

1
2
toggle('hide');		//直接定位隐藏
toggle('show'); //直接定位显示

第二章: 上卷下拉效果

1.slideDown( )

用滑动动画显示一个匹配的元素

.slideDown([duration],[complete])

参数1:动画周期

参数2:回调函数(动画执行完之后执行的函数)

改变元素高度的动画,有一个从上至下的滑动效果

1
2
3
4
5
//点击button
//执行3秒显示
$("button:first").click(function() {
$("#a1").slideDown(3000)
});

2. slideUp( )

用滑动动画隐藏一个匹配的元素

.slideDown([duration],[complete])

1
2
3
4
5
//点击button
//执行3秒隐藏
$("button:first").click(function() {
$("#a1").slideUp(3000)
});

3.slideToggle( )

1.基本操作:

​ 处理元素显示或者隐藏,没有动画效果

​ 若匹配元素原先是显示则会隐藏,

​ 原先是隐藏,则会显示.

2.提供参数

.slideToggle([duration],[complete])

第三章: 淡入淡出

1.fadeOut( )

淡出动画,透明度越来越小,直到0;

1
.fadeOut( [duration ], [ complete ] )

2.fadeIn( )

淡入动画,透明度越来越大,直到1;

1
.fadeIn( [duration ], [ complete ] )

3.fadeToggle( )

fadeToggle切换fadeOut与fadeIn效果,所谓”切换”,即如果元素当前是可见的,则将其隐藏(淡出);如果元素当前是隐藏的,则使其显示(淡入)。

1
.fadeToggle( [duration ] ,[ complete ] )

4.fadeTo( )

指定透明度到多少

1
.fadeTo( duration, opacity ,callback)
1
2
3
4
5
6
//鼠标移入div,在1s内,透明度变为0.5
$('div').on('mouseover',function(){
$(this).fadeTo(1000,0.5,function(){
alert("完成");
})
})

第四章: animate

animate(params[, speed][,easing][, callback])

参数1:一个包含样式的属性和值的映射对。可以有多个映射。 必须

参数2:可选。速度

参数3:动画算子(字符串。jquery默认只有linear和swing)。更复杂的需要第三方支持。

务必要先导入jquery再导入动画算子插件。

参数4:回调函数。可选。表示动画执行完毕之后然后再执行的函数。

1
2
3
4
5
6
7
8
9
10
1:
让div在1s内移动到left为300的位置,宽高都变为200px
$('div').animate({
left:300, //left:'300px',
width:200,
height:200,
opacity:0.5
},1000,"linear",function () {
console.log("wancheng");
})
  1. 支持’+=’写法
1
2
3
4
5
2:
让div在1s内width增加100px
$('div').animate({
width:'+=100' //最终值是在当前值的基础上加上100px
})
  1. 支持 toggle,hide,show
1
2
3
4
5
6
7
8
9
10
3:
支持 toggle,hide,show
$('div').animate({
left:'toggle',
width:'toggle',
height:'toggle',
opacity:0.5
},1000,function () {
console.log('完成')
})
  1. 支持链式(动画序列)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
4:
支持链式:
$('div').animate({
left:300
},1000,function () {
console.log('第一步完成')
}).animate({
top:'+=200'
},1000,function () {
console.log('第二步完成');
}).animate({
left:'-=300'
},1000,function () {
console.log('第三步完成');
}).animate({
top:'-=200'
},1000,function () {
console.log('第四步完成');
})

4.支持重复执行

1
2
3
4
5
6
5:
$(function step(){
$('div').animate({
left:'+=10'
},1000,step) //在动画结束之后,回调step函数
})

5.停止动画

1
2
3
4
5
stop有两个可选参数:
参数1:true/false true表示立即清除所有动画队列中的所有动画,并结束当前动画。已经执行到了什么
地方就停在什么地方。 默认是false,表示停止当前动画,并开始动画队列中的下一个。
参数2:true/false: 表示结束动画的时候,是否直接到达当前动画的末尾状态。true表示直接去当前动画的末尾状态,f
false,表示维持当前状态
1
('div').stop()

6.检测动画执行状态

1
2
3
4
5
if($box.is(":animated")){
alert("动画正在执行");
}else{
alert("动画没有在执行");
}

第五章: JQuery插件

注:引用任何JQuery插件都得先引入JQuery

评论