首页 专题 H5案例 前端导航 UI框架

JQuery学习笔记整理:动画特效

作者:TG 日期: 2016-10-29 阅读: 1232
本章主要讲解jQuery的动画特效。

目录
  1. 基础特效
  2. 滑动动画
  3. 淡入淡出动画
  4. 可定制特效(animate())
  5. 动画队列(queue)
  6. jQuery.fx.off和jQuery.fx.interval

1、基础特效

show()、show(duration)、hide(duration,easing)、show(duration,complete)、show(duration,easing,function)、show(options) 显示所有匹配元素    

hide()、hide(duration)、hide(duration,easing)、hide(duration,function)、hide(duration,easing,complete)、hide(options) 隐藏所有匹配元素    

toggle()、toggle(duration)、toggle(duration,easing)、toggle(duration,function)、toggle(duration,easing,function) 切换所有匹配元素显示或隐藏    

toggle(boolean) 单向切换


(1)show()、hide()
show()和hide()方法分别用来显示或隐藏元素,都有可选三个参数:
duration:指定过渡时间(毫秒数),默认为400,还可以是字符串值fast(=200)或slow(=600)
easing:指定使用何种动画效果,默认是“swing”,还可以设为“linear”或自定义的动画样式的函数名称。
funciton:当显示或隐藏完毕后需要执行的函数,函数内的this变量指向当前的元素。

<div class="box"><div>123</div></div>

<button>点击</button>


$('.box').show()  // 立即显示

$('.box').show(1000);

$('.box').show('fast');

$('.box').show(1000,'linear');

$('.box').show(1000,function(){

  alert('显示完毕');

});

这两个方法还可传入一个映射对象options:

var anim = {

  duration: 1000,

  easing: 'linear',

  complete: function(){

    alert('隐藏完毕');

  }

};

$('button').on('click',function(){

  $('.box').hide(anim);

});


注意:如果对一个隐藏的元素调用hide()方法或对已经显示的元素调用show()方法,不会产生任何效果,而且显示或隐藏,该元素的所有后代元素也同样会显示或隐藏。

(3)toggle()
toggle()方法用来切换元素的显示状态,它同样支持可选的duration、easing、complete三个参数,也可传入一个映射对象options,而且它可单向切换,就是传入一个布尔值时,当设置为true,则显示元素,否则隐藏元素。

$('.box').toggle();

$('.box').toggle(1000);

$('.box').toggle('slow');

$('.box').toggle(1000,function(){

  alert('切换完毕');

});

$('.box').toggle( { duraction: 1000 } );

$('.box').toggle(true);  // 等价于$('.box').show()


2、滑动动画

slideDown()、slideDown(duration,complete)、slideDown(duration,easing,complete)、sldieDown(options)  让元素内容自上而下逐渐显示出来  

slideUp()、slideUp(duration,complete)、slideUp(duration,easing,complete)、slideUp(options) 让元素内容自下而上逐渐消失  

slideToggle()、slideToggle(duration,complete)、slideToggle(duration,easing,complete)、slideToggle(options)  切换元素的滑动状态


(1)slideDown()、slideUp()
slideDown()用来让元素内容自上而下逐渐显示出来,高度由0到元素原有高度。
slideUp()用来让元素内容自下而上逐渐消失,高度由原有高度到0。

slideDown()、slideUp()这两个方法的用法和show()方法的用法完全相同,也支持可选的duration、easing、complete三个参数,也可传入一个映射对象options。

(2)slideToggle()
slideToggle()用法和toggle()的用法一样,也是用来切换元素的显示状态,只不过前者会带有滑动的过渡动画效果,slideToggle()同样支持可选的duration、easing、complete三个参数,也可传入一个映射对象options,但它没有单向切换。

3、淡入淡出动画
淡入淡出动画是通过减小或增加元素的不透明度来隐藏或显示元素的。

fadeOut()、fadeOut(duration)、fadeIn(duration,easing)、fadeOut(duration,funciton)、fadeOut(duration,easing,complete)    以淡出(增加透明度)的方式隐藏元素

fadeIn()、fadeIn(duration)、fadeIn(duration,easing)、fadeIn(duration,complete)、fadeIn(duration,easing,funciton)    以淡入(减小透明度)的方法显示元素

fadeTo(duration,opacity)、fadeTo(duration,opacity,easing,function)  增加或减小透明度到指定大小

fadeToggle()、fadeToggle(duration)、fadeToggle(duration,easing)、fadeToggle(duration,complete)、fadeToggle(duration,easing,complete)  以改变透明度来切换元素的显示状态

(1)fadeOut()、fadeIn()、fadeToggle()
这三个方法的用法和show()一样,也支持可选的duration、easing、complete三个参数,也可传入一个映射对象options。

(2)fadeTo()
fadeTo()用来增加或减小透明度到指定大小,这个方法的第二个参数是opacity,也就是要过渡到的透明度大小(0~1,完全透明~完全不透明)

$('.box').fadeTo(1000,0.5);


4、可定制动画

animate(properties)、animate(properties,duration)、animate(properties,duration,complete)、animate(properties,duration,easing,complete)、animate(properties,options)

强大的jQuery当然不可能只有这些基本的特效,它提供了animate()方法,允许我们自己定制动画。

animate()方法支持四个可选参数:
properties:一个或多个css属性的键值对所构成的Object对象。
duration:指定过渡时间(毫秒数),默认为400,还可以是字符串值fast(=200)或slow(=600)
easing:指定使用何种动画效果,默认是“swing”,还可以设为“linear”或自定义的动画样式的函数名称。 funciton:当动画执行完毕后需要执行的函数,函数内的this变量指向当前的元素。

$('.box').animate({

  height: '200px'

},1000,'linear',funciton(){

  alert('执行完毕');

});


// 支持多个动画连续执行

$('.box').animate({height: '200px'},1000).animate({marginTop:'30px'},500);


还可传入一个options的映射对象,里面可以包含duration、easing、complete可选参数。

注意:animate()是基于CSS属性的,而且CSS属性接受纯数值,对于color、background-color等非数值的CSS属性是不支持的。支持的CSS属性可看这里:http://www.runoob.com/jquery/eff-animate.html

5、动画队列

queue()、queue(function)  返回匹配元素上正在执行的动画队列,可选函数参数,表示在动画队列的末尾添加一个动画

dequeue()   从匹配元素上正在执行的动画队列中取出第一个动画并执行这个动画

clearQueue()  清空匹配元素的队列

stop()、stop(clearQueue)、stop(clearQueue,jumpToEnd)  停止当前动画

finish()  停止当前所有正在执行的动画并清理动画队列

delay(time)  在两个动画之间插入一段延时。

(1)queue()、dequeue()
queue()方法返回匹配元素上正在执行的动画队列,可选函数参数,表示在动画队列的末尾添加一个动画

<div class="box" style="width:100px;height:100px;background:red"></div>


var box = $(".box");   

function anim(){   

  box.animate({   

    width: '+=5'   

  },100).animate({   

    height: '+=3'   

  },200).animate({   

    marginTop: '+=3'   

  },300,funciton(){

    $('.box').queue().length;  //1

  });   

};   

anim();

每个动画执行完毕,jQuery就会把它从队列中删除。

注意:如果当前jQuery对象匹配多个元素:获取队列时,只获取第一个匹配元素上的队列;设置队列(替换队列、追加函数)时,则为每个匹配元素都分别进行设置。

dequeue()用来从匹配元素上正在执行的动画队列中取出第一个动画并执行这个动画

(2)stop()、finish()

stop()方法用来停止当前动画,它还可传入三个可选的布尔值参数。

stop( [ queueName ] [, clearQueue [, jumpToEnd ] ] );

第一个参数是要停止动画的队列名称(1.7版本新增,默认为 fx ),后两个参数的默认值都是false,也就是说只有当前正在播放的动画被从队列中删除,并且各个CSS属性的值会保持为动画被打断瞬间的值;


如果把第一个参数的值设置为true,就会删除队列中的所有其他动画;如果把第二个参数设置为true,那么正在播放的动画会瞬间抵达动画终点。


finish()方法用来停止当前所有正在执行的动画并清理动画队列,等价于stop(true,true)


(3)delay()

delay()在两个动画之间插入一段延时,可传入一个以毫秒为单位的数据,表示应该延迟的时间。

delay(duration)


6、$.fx.off和$.fx.interval

 $.fx.off 可用于设置或返回是否全局性地禁用所有动画。

$.fx.off = true | false;

如果将该属性设为true,将全局性地禁用所有动画。所有正在执行的动画队列不会受到影响。尚未执行的任何动画队列都会在执行时立即完成,而不再带有动画效果。   


如果将该属性设为false,将全局性地启用动画效果。


 $.fx.interval 用于设置或返回动画的帧速(毫秒值),也可以这样理解,用于设置jQuery动画每隔多少毫秒绘制一帧图像(触发一次样式更改,浏览器可能会重新绘制当前页面)。


该值越小,则动画的触发次数越多,动画效果也更明显、更平滑,当然也就越耗费性能。


更改该属性值时,正在执行的动画队列将不受影响。尚未执行的任何动画队列都将按照更改后的帧速来绘制动画效果。


关注”全栈技术杂货铺“

全栈技术杂货铺