春天的熊

从零开始学习jQuery之让页面动起来(2)

四. 淡入淡出动画函数

淡出淡出函数只提供透明度渐变的效果.

淡入淡出函数 Fading

名称 说明 举例 fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

用600毫秒缓慢的将段落淡入:
$("p").fadeIn("slow"); fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。 用600毫秒缓慢的将段落淡出:
$("p").fadeOut("slow"); fadeTo(speed, opacity, [callback]) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。 用600毫秒缓慢的将段落的透明度调整到0.66,大约2/3的可见度:
$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66);

讲解

fadeIn和fadeOut两个函数对应show和hide, 用于将对象以透明度渐变的效果显示和隐藏:

  1. $("#divPop").fadeIn(200);  
  2. $("#divPop").fadeOut("fast"); 

透明度渐变没有切换函数.

需要特别讲解的是fadeTo函数. 这个函数能让对象渐变到指定的透明度上. opacity参数取值从0-1, 比如0.6表示透明度为60%.

和fadeIn与fadeOut不同的是, fadeTo函数只改变对象的透明度, 即使透明度为0对象仍然占位. 而fadeIn和fadeOut最后一定会改变对象的display属性, fadeOut后对象将从页面上消失(不占位), 但是fadeTo仅仅是让其透明(占位).

fadeTo函数可以配合fadeIn使用. 比如默认的情况下, fadeIn最后让对象完全显示:

image

但是如果之前使用过fadeTo设置弹出层的透明度, 则可以让其以半透明:

image

核心代码如下:

  1. //设置弹出层的透明度  
  2. $("#divPop").fadeTo(0, 0.66);  
  3. //让弹出层透明显示  
  4. if ($("#divPop").css("display") == "none")  
  5. {  
  6.     $("#divPop").fadeIn(speed);  
  7. }  
  8. else 
  9. {  
  10.     $("#divPop").fadeOut(speed);  

用fadeTo设置了弹出层透明度后, 在使用fadeIn会让对象显示并且渐变到fadeTo设置的透明度.

这里介绍的仅仅是两个函数的特性, 实际应用中并不一定要两者配合使用.

四. 动画实验室

动画实验室是"jQuery实战"一书中的示例, 方便我们查看上面三种动画的效果. 对应源代码的 chapter7\lab.effects.html 文件.源代码在本文最后提供下载.实验室截图如下:

2012-03-30
/  标签: jqueryweb
   
评论
热度(1)
  1. 小城,风带香春天的熊 转载了此文字
坚信上帝的延迟,并不是上帝的拒绝。

那些还没有到来的,总会在找寻和尝试中来到。

Here,成长的角落。

Q_Q:317886534