我们来看看jquery是如何实现淡入 淡出效果的.
fadeOut(speed,callback)
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
$("#fadeOut1").click(function(){
$("#fadeOut").fadeOut("slow",function(){alert("是不是下面这个层慢慢消失了！")});
})
这里我们说需要说明的是
speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fadeIn(speed, callback)
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 |
用法和 fadeOut 一样,只不过是一个相反的过程
fadeTo(speed,opacity,callback)
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
$("#fadeTo1").click(function(){
$("#fadeTo").fadeTo("slow",0.5,function(){alert("是不是下面这个层透明度变成50%了！")});
})
0.5表示将不透明度设置成50%
所有代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
jquery基础教程五(效果函数之fadeIn,fadeOut和fadeTo)
.redborder{border:2px dashed #ff0000 }
fadeOut(speed,callback)
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
点击fadeOut1将执行$("#fadeOut").fadeOut("slow",function(){alert("是不是下面这个层慢慢消失了！")});
fadeIn(speed, callback)
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
点击fadeIn1将执行 $("#fadeIn").fadeIn("slow",function(){alert("是不是下面这个层慢慢出现了！")});
fadeTo(speed,opacity,callback)
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
点击fadeIn1将执行 $("#fadeTo").fadeTo("slow",0.5,function(){alert("是不是下面这个层透明度变成50%了！")});
分享到：
相关推荐
**jQuery基础教程中文版2015** jQuery是一款强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。2015年发布的这个基础教程，旨在帮助初学者快速掌握jQuery的核心概念和技术。 一、...
jQuery精品视频教程jQuery精品视频教程jQuery精品视频教程
《jQuery基础教程第四版》是一本深受欢迎的前端开发指南，专注于jQuery库的使用和实践。jQuery是一个轻量级、高性能的JavaScript库，它极大地简化了JavaScript操作DOM（文档对象模型）、事件处理、动画制作以及Ajax...
在《JQuery教程全集》的第一章中，作者首先阐述了为何选择 JQuery 这个 JavaScript 库。随着 Web 开发技术的发展，JavaScript 的使用变得越来越普遍。然而，在没有库或框架的支持下，编写复杂的 DOM 操作和 AJAX ...
jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始...
在HTML文档操作方面，教程将详细介绍如何使用jQuery来改变HTML内容、添加或删除元素，以及如何使用`html()`, `text()`, `append()`, `prepend()`等方法。此外，还会涉及CSS操作，如设置样式、添加/移除类，以及使用`...
jQuery经典入门教程，供学习交流，谢谢~
jquery基础教程中文版jquery基础教程中文版jquery基础教程中文版
4. **链式操作**：jQuery的方法返回的是jQuery对象本身，这使得我们可以连续调用多个方法，如`$("#element").css("color", "red").fadeIn(500)`，这会先改变元素的颜色，然后淡入显示。 5. **动画效果**：jQuery...
### JQuery 类库使用教程 #### 一、环境设置与下载jQuery 为了开始使用JQuery，首先需要下载并安装。可以从官方站点（http://jquery.com/）或者中文站点（http://wiki.jquery.org.cn/doku.php）下载最新版本。本...
尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程
### jQuery教程知识点详解 #### 一、什么是jQuery jQuery是一种JavaScript脚本库，它与.NET类库的概念相似：提供了一系列工具方法或对象方法的封装，旨在简化开发者的使用过程。值得注意的是，虽然“库”与“框架...
《jQuery基础教程(第2版)》最后两章专门介绍了如何使用和编写jQuery插件。值得一提的是，本版新增的附录D分门别类地列出了所有jQuery API，为高效使用jQuery提供了方便。, 《jQuery基础教程(第2版)》注重理论与实践...
jQuery电子书教程合集，包括jQuery入门教程(很不错)，jQuery基础教程，jQuery的起点教程(PDF版)，15天学会jquery(完整版)，可能有些教程之间就有些重复，因为都是从网上下载的，有需要朋友就下吧！
JQuery基础教程之第五章后面章节请看我后续资源jquery全套教程： JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery...
JQuery基础教程之第七章后续章节看我后续资源jquery全套教程： JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
### jQuery教程精要 #### 一、初识jQuery：为何选择它？ 在现代网页开发中，**jQuery**作为一款流行的JavaScript库，凭借其强大的功能和简洁的语法，成为了提升网页互动性和开发效率的关键工具。本教程旨在深入...
4. **动画效果**：jQuery的动画方法包括`fadeIn()`, `fadeOut()`, `slideToggle()`, `animate()`等，可以实现平滑的过渡效果。`animate()`函数允许自定义动画参数，实现更复杂的动画效果。 5. **Ajax交互**：`$....
**jQuery视频教程及详细说明** 本教程旨在深入探讨jQuery这一强大的JavaScript库，它极大地简化了网页的DOM操作、事件处理、动画制作以及Ajax交互。jQuery以其简洁的语法和丰富的插件，成为前端开发者不可或缺的...