99re热这里只有精品视频,7777色鬼xxxx欧美色妇,国产成人精品一区二三区在线观看,内射爽无广熟女亚洲,精品人妻av一区二区三区

JQuery學習筆記整理:動畫特效

2018-06-19 16:01 更新

      本章主要講解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()方法分別用來顯示或隱藏元素,都有可選三個參數(shù):
duration:指定過渡時間(毫秒數(shù)),默認為400,還可以是字符串值fast(=200)或slow(=600)
easing:指定使用何種動畫效果,默認是“swing”,還可以設為“l(fā)inear”或自定義的動畫樣式的函數(shù)名稱。
funciton:當顯示或隱藏完畢后需要執(zhí)行的函數(shù),函數(shù)內(nèi)的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);

});


注意:如果對一個隱藏的元素調(diào)用hide()方法或對已經(jīng)顯示的元素調(diào)用show()方法,不會產(chǎn)生任何效果,而且顯示或隱藏,該元素的所有后代元素也同樣會顯示或隱藏。

(3)toggle()
toggle()方法用來切換元素的顯示狀態(tài),它同樣支持可選的duration、easing、complete三個參數(shù),也可傳入一個映射對象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)  讓元素內(nèi)容自上而下逐漸顯示出來  

slideUp()、slideUp(duration,complete)、slideUp(duration,easing,complete)、slideUp(options) 讓元素內(nèi)容自下而上逐漸消失  

slideToggle()、slideToggle(duration,complete)、slideToggle(duration,easing,complete)、slideToggle(options)  切換元素的滑動狀態(tài)


(1)slideDown()、slideUp()
slideDown()用來讓元素內(nèi)容自上而下逐漸顯示出來,高度由0到元素原有高度。
slideUp()用來讓元素內(nèi)容自下而上逐漸消失,高度由原有高度到0。

slideDown()、slideUp()這兩個方法的用法和show()方法的用法完全相同,也支持可選的duration、easing、complete三個參數(shù),也可傳入一個映射對象options。

(2)slideToggle()
slideToggle()用法和toggle()的用法一樣,也是用來切換元素的顯示狀態(tài),只不過前者會帶有滑動的過渡動畫效果,slideToggle()同樣支持可選的duration、easing、complete三個參數(shù),也可傳入一個映射對象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)  以改變透明度來切換元素的顯示狀態(tài)

(1)fadeOut()、fadeIn()、fadeToggle()
這三個方法的用法和show()一樣,也支持可選的duration、easing、complete三個參數(shù),也可傳入一個映射對象options。

(2)fadeTo()
fadeTo()用來增加或減小透明度到指定大小,這個方法的第二個參數(shù)是opacity,也就是要過渡到的透明度大?。?~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()方法支持四個可選參數(shù):
properties:一個或多個css屬性的鍵值對所構成的Object對象。
duration:指定過渡時間(毫秒數(shù)),默認為400,還可以是字符串值fast(=200)或slow(=600)
easing:指定使用何種動畫效果,默認是“swing”,還可以設為“l(fā)inear”或自定義的動畫樣式的函數(shù)名稱。 funciton:當動畫執(zhí)行完畢后需要執(zhí)行的函數(shù),函數(shù)內(nèi)的this變量指向當前的元素。

$('.box').animate({

  height: '200px'

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

  alert('執(zhí)行完畢');

});


// 支持多個動畫連續(xù)執(zhí)行

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


還可傳入一個options的映射對象,里面可以包含duration、easing、complete可選參數(shù)。

注意:animate()是基于CSS屬性的,而且CSS屬性接受純數(shù)值,對于color、background-color等非數(shù)值的CSS屬性是不支持的。支持的CSS屬性可看這里:http://www.15014759268.cn/jquery/eff-animate.html

5、動畫隊列

queue()、queue(function)  返回匹配元素上正在執(zhí)行的動畫隊列,可選函數(shù)參數(shù),表示在動畫隊列的末尾添加一個動畫

dequeue()   從匹配元素上正在執(zhí)行的動畫隊列中取出第一個動畫并執(zhí)行這個動畫

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

stop()、stop(clearQueue)、stop(clearQueue,jumpToEnd)  停止當前動畫

finish()  停止當前所有正在執(zhí)行的動畫并清理動畫隊列

delay(time)  在兩個動畫之間插入一段延時。

(1)queue()、dequeue()
queue()方法返回匹配元素上正在執(zhí)行的動畫隊列,可選函數(shù)參數(shù),表示在動畫隊列的末尾添加一個動畫

<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();

每個動畫執(zhí)行完畢,jQuery就會把它從隊列中刪除。

注意:如果當前jQuery對象匹配多個元素:獲取隊列時,只獲取第一個匹配元素上的隊列;設置隊列(替換隊列、追加函數(shù))時,則為每個匹配元素都分別進行設置。

dequeue()用來從匹配元素上正在執(zhí)行的動畫隊列中取出第一個動畫并執(zhí)行這個動畫

(2)stop()、finish()

stop()方法用來停止當前動畫,它還可傳入三個可選的布爾值參數(shù)。

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

第一個參數(shù)是要停止動畫的隊列名稱(1.7版本新增,默認為 fx ),后兩個參數(shù)的默認值都是false,也就是說只有當前正在播放的動畫被從隊列中刪除,并且各個CSS屬性的值會保持為動畫被打斷瞬間的值;


如果把第一個參數(shù)的值設置為true,就會刪除隊列中的所有其他動畫;如果把第二個參數(shù)設置為true,那么正在播放的動畫會瞬間抵達動畫終點。


finish()方法用來停止當前所有正在執(zhí)行的動畫并清理動畫隊列,等價于stop(true,true)


(3)delay()

delay()在兩個動畫之間插入一段延時,可傳入一個以毫秒為單位的數(shù)據(jù),表示應該延遲的時間。

delay(duration)


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

 $.fx.off 可用于設置或返回是否全局性地禁用所有動畫。

$.fx.off = true | false;

如果將該屬性設為true,將全局性地禁用所有動畫。所有正在執(zhí)行的動畫隊列不會受到影響。尚未執(zhí)行的任何動畫隊列都會在執(zhí)行時立即完成,而不再帶有動畫效果。   


如果將該屬性設為false,將全局性地啟用動畫效果。


 $.fx.interval 用于設置或返回動畫的幀速(毫秒值),也可以這樣理解,用于設置jQuery動畫每隔多少毫秒繪制一幀圖像(觸發(fā)一次樣式更改,瀏覽器可能會重新繪制當前頁面)。


該值越小,則動畫的觸發(fā)次數(shù)越多,動畫效果也更明顯、更平滑,當然也就越耗費性能。


更改該屬性值時,正在執(zhí)行的動畫隊列將不受影響。尚未執(zhí)行的任何動畫隊列都將按照更改后的幀速來繪制動畫效果。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號