jQuery实战读书笔记（第五章）
第五章 用動畫和特效裝扮頁面
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() 簡化代碼：
$(function(){
?$('div.caption img').click(function(){
? ?$(this).closest('div.module').find('div.body').toggle();
?});
});
2. 用動畫改變元素的顯示狀態(tài)
2.1 漸變
show(speed, callback)
hide(speed, callback)
toggle(speed, callback)
speed - 毫秒數(shù)，或預定義字符串：slow, normal, fast
callback - 回調，無參數(shù)，this 為當前執(zhí)行動畫的元素，每個元素動畫執(zhí)行完成時回調。
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表示不僅停止當前動畫，而且停止在動畫隊列中正在等待執(zhí)行的所有其他動畫
gotoEnd - true 表示使當前動畫執(zhí)行到其邏輯結束
禁止所有的動畫：將 jQuery.fx.off 設置為 true 將導致所有的特效立即發(fā)生，沒有動畫過程。
3. 創(chuàng)建自定義動畫
animate(properties, duration, easing, callback)
animate(properties, options)
properties - 指定動畫結束時所支持的CSS樣式應該達到的值
duration - 毫秒或：slow, normal, fast
easing - 函數(shù)名稱，用于指定動畫緩動特效，通過由插件提供
callback - 動畫結束時回調函數(shù)
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 并發(fā)的動畫
animate() 方法創(chuàng)建的動畫在頁面運行時不會阻塞代碼的執(zhí)行，其他動畫也一樣。
多個并發(fā)動畫的實現(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 內部，動畫被放入隊列并按順序執(zhí)行它們。
4.2 將函數(shù)排隊執(zhí)行
添加函數(shù)到隊列：
queue(name)
queue(name, function)
queue(name, queue)
執(zhí)行隊列中的函數(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');
?});
});
這需要點擊按鈕4次才能執(zhí)行完隊列中的函數(shù)，改為自動觸發(fā)下一隊列函數(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');
?});
});
清除沒有執(zhí)行的隊列函數(shù)
clearQueue(name)
延遲隊列函數(shù)之間的執(zhí)行
delay(duration, name)
duration - 毫秒或 'fast', 'slow'，表示200毫秒和600毫秒
4.3 插入函數(shù)到特效隊列
$("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实战读书笔记（第五章）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CCS5连接调试C64X系列DSP核
- 下一篇： ICallbackEventHandle