第五章 用動(dòng)畫(huà)和特效裝扮頁(yè)面

1. 顯示和隱藏元素

1.1 可折疊的模塊

$('div.caption img').click(function(){

?var body$ = $(this).closest('div.module').find('div.body');

?if (body$.is(':hidden'))

? ?body$.show();

?else

? ?body$.hide();

});

1.2 切換元素的顯示狀態(tài)

用 toggle() 簡(jiǎn)化代碼：

$(function(){

?$('div.caption img').click(function(){

? ?$(this).closest('div.module').find('div.body').toggle();

?});

});

2. 用動(dòng)畫(huà)改變?cè)氐娘@示狀態(tài)

2.1 漸變

show(speed, callback)

hide(speed, callback)

toggle(speed, callback)

speed - 毫秒數(shù)，或預(yù)定義字符串：slow, normal, fast

callback - 回調(diào)，無(wú)參數(shù)，this 為當(dāng)前執(zhí)行動(dòng)畫(huà)的元素，每個(gè)元素動(dòng)畫(huà)執(zhí)行完成時(shí)回調(diào)。

toggle(condition) 條件為 true 時(shí)顯示元素，否則隱藏元素。

可折疊模塊的動(dòng)畫(huà)版本：

$(function() {

?$('div.caption img').click(function(){

? ?$(this).closest('div.module').find('div.body')

? ? ?.toggle('slow', function(){

? ? ? ?$(this).closest('div.module')

? ? ? ? ?.toggleClass('rolledup', $(this).is(':hidden'));

? ? ?});

?});

});

2.2 淡入淡出

show() 和 hide() 不僅縮放元素大小，還會(huì)調(diào)整不透明度。淡入淡出只影響元素的不透明度。

fadeIn(speed, callback)

fadeOut(speed, callback)

fadeTo(speed, opacity, callback)

2.3 上下滑動(dòng)元素

slideDown(speed, callback)

slideUp(speed, callback)

slideToggle(speed, callback)

2.4 停止動(dòng)畫(huà)

stop(clearQueue, gotoEnd)

clearQueue - true表示不僅停止當(dāng)前動(dòng)畫(huà)，而且停止在動(dòng)畫(huà)隊(duì)列中正在等待執(zhí)行的所有其他動(dòng)畫(huà)

gotoEnd - true 表示使當(dāng)前動(dòng)畫(huà)執(zhí)行到其邏輯結(jié)束

禁止所有的動(dòng)畫(huà)：將 jQuery.fx.off 設(shè)置為 true 將導(dǎo)致所有的特效立即發(fā)生，沒(méi)有動(dòng)畫(huà)過(guò)程。

3. 創(chuàng)建自定義動(dòng)畫(huà)

animate(properties, duration, easing, callback)

animate(properties, options)

properties - 指定動(dòng)畫(huà)結(jié)束時(shí)所支持的CSS樣式應(yīng)該達(dá)到的值

duration - 毫秒或：slow, normal, fast

easing - 函數(shù)名稱，用于指定動(dòng)畫(huà)緩動(dòng)特效，通過(guò)由插件提供

callback - 動(dòng)畫(huà)結(jié)束時(shí)回調(diào)函數(shù)

options - 支持屬性：duration, easing, complete, queue, step

3.1 自定義縮放動(dòng)畫(huà)

$('.animateMe').each(function(){

?$(this).animate({

? ? ? $(this).width() * 2,

? ? ?height: $(this).height() * 2

? ?},

? ?2000

?);

});

3.2 自定義掉落動(dòng)畫(huà)

$('.animateMe').each(function(){

?$(this)

? ?.css('position', 'relative')

? ?.animate(

? ? ?{

? ? ? ?opacity: 0,

? ? ? ?top: $(window).height() - $(this).height - $(this).position().top

? ? ?},

? ? ?'slow',

? ? ?function(){ $(this).hide(); }

? ?);

});

3.3 自定義消散動(dòng)畫(huà)

$('animateMe').each(function() {

?var position = $(this).position();

?$(this)

? ?.css({position: 'absolute',

? ? ? ? ?top: position.top,

? ? ? ? ?left: position.left})

? ?.animate(

? ? ?{

? ? ? ?opacity: 'hide',

? ? ? ? $(this).width() * 5,

? ? ? ?height: $(this).height() * 5,

? ? ? ?top: position.top - ($(this).height() * 5 / 2),

? ? ? ?left: position.left - ($(this).width() * 5 / 2)

? ? ?},

? ? ?'normal');

});

4. 動(dòng)畫(huà)和隊(duì)列

4.1 并發(fā)的動(dòng)畫(huà)

animate() 方法創(chuàng)建的動(dòng)畫(huà)在頁(yè)面運(yùn)行時(shí)不會(huì)阻塞代碼的執(zhí)行，其他動(dòng)畫(huà)也一樣。

多個(gè)并發(fā)動(dòng)畫(huà)的實(shí)現(xiàn)邏輯：

$('#startButton').click(function(){

?say(1);

?$("img[alt='moon']").animate({left:'+=256'},2500};

?say(2);

?$("img[alt='moon']").animate({top:'+=256'},2500};

?say(3);

?$("img[alt='moon']").animate({left:'-=256'},2500};

?say(4);

?$("img[alt='moon']").animate({top:'-=256'},2500};

?say(5);

});

在 jQuery 內(nèi)部，動(dòng)畫(huà)被放入隊(duì)列并按順序執(zhí)行它們。

4.2 將函數(shù)排隊(duì)執(zhí)行

添加函數(shù)到隊(duì)列：

queue(name)

queue(name, function)

queue(name, queue)

執(zhí)行隊(duì)列中的函數(shù)：

dequeue(name)

$(function() {

?$('img').queue('chain',

? ?function(){ say('First: ' + $(this).attr('alt')); });

?$('img').queue('chain',

? ?function(){ say('Second: ' + $(this).attr('alt')); });

?$('img').queue('chain',

? ?function(){ say('Third: ' + $(this).attr('alt')); });

?$('img').queue('chain',

? ?function(){ say('Fourth: ' + $(this).attr('alt')); });

?$('button').click(function(){

? ?$('img').dequeue('chain');

?});

});

這需要點(diǎn)擊按鈕4次才能執(zhí)行完隊(duì)列中的函數(shù)，改為自動(dòng)觸發(fā)下一隊(duì)列函數(shù)的執(zhí)行：

$(function() {

?$('img').queue('chain',

? ?function(){

? ? ?say('First: ' + $(this).attr('alt'));

? ? ?$(this).dequeue('chain');

? ?});

?$('img').queue('chain',

? ?function(){ say('Second: ' + $(this).attr('alt')); $(this).dequeue('chain');});

?$('img').queue('chain',

? ?function(){ say('Third: ' + $(this).attr('alt')); $(this).dequeue('chain');});

?$('img').queue('chain',

? ?function(){ say('Fourth: ' + $(this).attr('alt')); $(this).dequeue('chain');});

?$('button').click(function(){

? ?$('img').dequeue('chain');

?});

});

清除沒(méi)有執(zhí)行的隊(duì)列函數(shù)

clearQueue(name)

延遲隊(duì)列函數(shù)之間的執(zhí)行

delay(duration, name)

duration - 毫秒或 'fast', 'slow'，表示200毫秒和600毫秒

4.3 插入函數(shù)到特效隊(duì)列

$("img[alt='moon']").animate({left:'+=256'},2500};

$("img[alt='moon']").animate({top:'+=256'},2500};

$("img[alt='moon']").queue('fx', function() {

? ?$(this).css({'backgroundColor':'black'});

? ?$(this).dequeue('fix');

?});

$("img[alt='moon']").deanimate({left:'-=256'},2500};

$("img[alt='moon']").animate({top:'-=256'},2500};

轉(zhuǎn)載于:https://blog.51cto.com/qczhang/1340548

總結(jié)

以上是生活随笔為你收集整理的jQuery实战读书笔记（第五章）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。