Jquery入门学习第四篇
2011-06-28 15:30
288 查看
三. 滑动动画函数
基本动画函数的效果是一个综合了滑动和透明度渐变的函数, jQuery还单独提供了只有滑动效果的相关函数.
滑动动画函数 Sliding
讲解
slideDown就是show的滑动效果版本,
slideUp就是hide的滑动效果版本, slideToggle就是toggle的滑动效果版本.
参数完全相同:
$("#divPop").slideDown(200);
$("#divPop").slideUp("fast");
$("#divPop").slideToggle("slow");
四. 淡入淡出动画函数
淡出淡出函数只提供透明度渐变的效果.
淡入淡出函数 Fading
讲解
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仅仅是让其透明(占位).
核心代码如下:
//设置弹出层的透明度
$("#divPop").fadeTo(0, 0.66);
//让弹出层透明显示
if ($("#divPop").css("display") == "none")
{
$("#divPop").fadeIn(speed);
//Reading Glasses with Case
}
else
{
$("#divPop").fadeOut(speed);
}
用fadeTo设置了弹出层透明度后, 在使用fadeIn会让对象显示并且渐变到fadeTo设置的透明度.
这里介绍的仅仅是两个函数的特性, 实际应用中并不一定要两者配合使用.
基本动画函数的效果是一个综合了滑动和透明度渐变的函数, 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] ) | 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。WenZhou Sunglasses 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。 | 用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仅仅是让其透明(占位).
核心代码如下:
//设置弹出层的透明度
$("#divPop").fadeTo(0, 0.66);
//让弹出层透明显示
if ($("#divPop").css("display") == "none")
{
$("#divPop").fadeIn(speed);
//Reading Glasses with Case
}
else
{
$("#divPop").fadeOut(speed);
}
用fadeTo设置了弹出层透明度后, 在使用fadeIn会让对象显示并且渐变到fadeTo设置的透明度.
这里介绍的仅仅是两个函数的特性, 实际应用中并不一定要两者配合使用.
相关文章推荐
- jQuery 从零开始学习 (一) 开天辟地入门篇
- 【JQuery入门学习】——JQuery简介
- jQuery事件与事件对象入门学习教程
- jQuery入门基础知识学习指南
- 从零开始学习jQuery (一) 开天辟地入门篇
- jQuery基础入门学习
- 从零开始学习jQuery (一) 开天辟地入门篇
- jQuery 语法简单介绍和入门学习
- jQuery学习---入门篇
- jquery学习入门到高级(转载博客园)
- jQuery入门学习四:jQuery处理xml格式的返回数据
- 从零开始学习jQuery (一) 开天辟地入门篇
- [转]从零开始学习jQuery (一) 入门篇
- jQuery入门学习之slideToggle()和bind()方法
- java学习【web基础-jQuery入门】
- 从零开始学习jQuery (一) 开天辟地入门篇
- jQuery入门视频教程-学习JQuery不再枯燥!
- jQuery 语法简单介绍和入门学习
- [知了堂学习笔记]_JQuery入门