第五章 用動畫和特效裝扮頁面

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 切換元素的顯示狀態

用 toggle() 簡化代碼：

$(function(){

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

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

?});

});

2. 用動畫改變元素的顯示狀態

2.1 漸變

show(speed, callback)

hide(speed, callback)

toggle(speed, callback)

speed - 毫秒數，或預定義字符串：slow, normal, fast

callback - 回調，無參數，this 為當前執行動畫的元素，每個元素動畫執行完成時回調。

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

可折疊模塊的動畫版本：

$(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() 不僅縮放元素大小，還會調整不透明度。淡入淡出只影響元素的不透明度。

fadeIn(speed, callback)

fadeOut(speed, callback)

fadeTo(speed, opacity, callback)

2.3 上下滑動元素

slideDown(speed, callback)

slideUp(speed, callback)

slideToggle(speed, callback)

2.4 停止動畫

stop(clearQueue, gotoEnd)

clearQueue - true表示不僅停止當前動畫，而且停止在動畫隊列中正在等待執行的所有其他動畫

gotoEnd - true 表示使當前動畫執行到其邏輯結束

禁止所有的動畫：將 jQuery.fx.off 設置為 true 將導致所有的特效立即發生，沒有動畫過程。

3. 創建自定義動畫

animate(properties, duration, easing, callback)

animate(properties, options)

properties - 指定動畫結束時所支持的CSS樣式應該達到的值

duration - 毫秒或：slow, normal, fast

easing - 函數名稱，用于指定動畫緩動特效，通過由插件提供

callback - 動畫結束時回調函數

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

3.1 自定義縮放動畫

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

?$(this).animate({

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

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

? ?},

? ?2000

?);

});

3.2 自定義掉落動畫

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

?$(this)

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

? ?.animate(

? ? ?{

? ? ? ?opacity: 0,

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

? ? ?},

? ? ?'slow',

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

? ?);

});

3.3 自定義消散動畫

$('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. 動畫和隊列

4.1 并發的動畫

animate() 方法創建的動畫在頁面運行時不會阻塞代碼的執行，其他動畫也一樣。

多個并發動畫的實現邏輯：

$('#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 內部，動畫被放入隊列并按順序執行它們。

4.2 將函數排隊執行

添加函數到隊列：

queue(name)

queue(name, function)

queue(name, queue)

執行隊列中的函數：

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

?});

});

這需要點擊按鈕4次才能執行完隊列中的函數，改為自動觸發下一隊列函數的執行：

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

?});

});

清除沒有執行的隊列函數

clearQueue(name)

延遲隊列函數之間的執行

delay(duration, name)

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

4.3 插入函數到特效隊列

$("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};

轉載于:https://blog.51cto.com/qczhang/1340548

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。