纳金网

标题: 从零开始学习jQuery之让页面动起来(2) [打印本页]

作者: 奇 时间: 2012-1-13 10:13
标题: 从零开始学习jQuery之让页面动起来(2)

本文讲解了jQuery提供的三种动画函数:基本动画, 滑动动画和淡入淡出动画. 使用这三种动画已经基本可以满足我们的日常开发需求, 让我们的页面动起来. 简单举例讲解了自定义动画. 对于想深入研究的人本文只能起到抛砖引玉的效果.
AD：

四. 淡入淡出动画函数
淡出淡出函数只提供透明度渐变的效果.
淡入淡出函数 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, 用于将对象以透明度渐变的效果显示和隐藏:
$("#divPop").fadeIn(200);  $("#divPop").fadeOut("fast");
透明度渐变没有切换函数.
需要特别讲解的是fadeTo函数. 这个函数能让对象渐变到指定的透明度上. opacity参数取值从0-1, 比如0.6表示透明度为60%.
和fadeIn与fadeOut不同的是, fadeTo函数只改变对象的透明度, 即使透明度为0对象仍然占位. 而fadeIn和fadeOut最后一定会改变对象的display属性, fadeOut后对象将从页面上消失(不占位), 但是fadeTo仅仅是让其透明(占位).
fadeTo函数可以配合fadeIn使用. 比如默认的情况下, fadeIn最后让对象完全显示:

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

核心代码如下:
//设置弹出层的透明度 $("#divPop").fadeTo(0, 0.66); //让弹出层透明显示 if ($("#divPop").css("display") == "none") { $("#divPop").fadeIn(speed); } else { $("#divPop").fadeOut(speed); }
用fadeTo设置了弹出层透明度后, 在使用fadeIn会让对象显示并且渐变到fadeTo设置的透明度.
这里介绍的仅仅是两个函数的特性, 实际应用中并不一定要两者配合使用.
四. 动画实验室
动画实验室是"jQuery实战"一书中的示例, 方便我们查看上面三种动画的效果. 对应源代码的 chapter7lab.effects.html 文件.源代码在本文最后提供下载.实验室截图如下:

作者: 晃晃 时间: 2012-1-22 23:24
鉴于你今年的良好表现，新年将至，别人都在祝福你新年快乐，我觉得换一种新颖的方式祝福你，那就是：天天开心，事事顺利，雷打不动的祝福属于你！

作者: 晃晃 时间: 2012-4-16 23:19
谢谢楼主，真是太实用了

作者: tc 时间: 2012-5-7 23:19
不错非常经典实用

作者: 菜刀吻电线 时间: 2012-5-16 23:28
真不错,全存下来了.

作者: 菜刀吻电线 时间: 2012-8-31 01:16
百度的叫度娘，网易的叫易娘，新浪内部还在为是叫新娘还是浪娘而争论不休！……不管你们是企鹅的额娘，豆瓣的伴娘，还是华为的伪娘，都要记得，淘宝才是你们的亲娘啊！亲！！

欢迎光临纳金网 (http://go.narkii.com/club/)