您的位置:知识库 » Web前端

从零开始学习jQuery (七) jQuery动画-让页面动起来!

作者: ziqiu.zhang  来源: 博客园  发布时间: 2009-05-11 10:28  阅读: 29628 次  推荐: 4   原文链接   [收藏]  
摘要:开发人员一直痛疼做动画. 但是有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手! 本文将介绍jQuery的动画相关函数.原来做动画如此简单!
[1] 从零开始学习jQuery (七) jQuery动画-让页面动起来!
[2] 从零开始学习jQuery (七) jQuery动画-让页面动起来!
[3] 从零开始学习jQuery (七) jQuery动画-让页面动起来!
[4] 从零开始学习jQuery (七) jQuery动画-让页面动起来!
[5] 从零开始学习jQuery (七) jQuery动画-让页面动起来!

系列文章导航:

从零开始学习jQuery (一) 开天辟地入门篇

从零开始学习jQuery (二) 万能的选择器

从零开始学习jQuery (三) 管理jQuery包装集

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

从零开始学习jQuery (五) 事件与事件对象

从零开始学习jQuery (六) AJAX快餐

从零开始学习jQuery (七) jQuery动画-让页面动起来!

从零开始学习jQuery (九) jQuery工具函数

从零开始学习jQuery (十) jQueryUI常用功能实战

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件


五. 滑动动画函数


基本动画函数的效果是一个综合了滑动和透明度渐变的函数, jQuery还单独提供了只有滑动效果的相关函数.

滑动动画函数  Sliding

名称 说明 举例
slideDown(speed, [callback])

通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅。

用600毫秒缓慢的将段落滑下:
$("p").slideDown("slow");
slideUp(speed, [callback]) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。 用600毫秒缓慢的将段落滑上:
$("p").slideUp("slow");
slideToggle(speed, [callback]) 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。 用600毫秒缓慢的将段落滑上或滑下:
$("p").slideToggle("slow");

讲解

slideDown就是show的滑动效果版本, slideUp就是hide的滑动效果版本, slideToggle就是toggle的滑动效果版本.

参数完全相同:

$("#divPop").slideDown(200);
$(
"#divPop").slideUp("fast");
$(
"#divPop").slideToggle("slow");

六.淡入淡出动画函数

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

淡入淡出函数 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最后让对象完全显示:

image

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

image

核心代码如下:

//设置弹出层的透明度
$("#divPop").fadeTo(0, 0.66);

//让弹出层透明显示
if ($("#divPop").css("display") == "none")
{
$(
"#divPop").fadeIn(speed);
}
else
{
$(
"#divPop").fadeOut(speed);
}

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

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

4
0

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻