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 切换元素的显示状态

用 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};