.fadeIn() 可以逐渐显示选择的元素，.fadeOut() 可以让元素逐渐消失 … 我们可以指定显示和消失的过程所用的时间，也可以指定一个函数在动画完成以后去执行 … .fadeToggle() 可以切换显示 …

现在这个文档里有三个按钮 … 显示，隐藏，还有切换 … 下面，我们可以去写点代码，在点击 隐藏 按钮的时候，逐渐隐藏封面图像还有标题 … 点击 显示 按钮的时候，把隐藏的东西再逐渐显示出来 ..

点击 切换 按钮，可以切换封面图像和标题的显示 …

测试

打开文档的脚本文件 … 先找到 显示 按钮 .. 这个按钮上有一个叫 .on 的类 … 然后调用它的点击事件 … 点击它的时候，去执行一个函数 … 在函数里 ..

可以先选择 .album 类的元素，也就是包含封面图像和标题的元素 … 再去调用它的 .fadeIn() 方法 … 这个方法可以把隐藏的元素逐渐显示出来 …

类似的方法，再设置一下 隐藏 按钮 .. . 隐藏按钮上有一个 .off 类 … 用这个类选择这个按钮 .. . 然后把 .fadeIn() 这个方法换成 .fadeOut() … 它会去逐渐隐藏选择的元素 …

最后，我们再处理一下切换按钮 … 这个按钮上有一个 .toggle 类 …

在这个按钮的点击事件处理程序里面，使用一个 .fadeToggle() 方法 … 在选择的元素处于显示的状态的时候，它会逐渐隐藏元素 … 处于隐藏的状态，它会逐渐显示元素 …

下面，我们去浏览器上试一下 …

打开控制台 … 选择其中的一个 .album 类的元素 … 注意在发生动画的时候，这个元素上的样式的变化 …

点击 隐藏 按钮 … 你会发现，元素会逐渐隐藏起来 … 一直到完全透明的状态 … 所有的 .album 类的元素上，都会应用一个 display:none 的样式 …

再点一下 显示 按钮 …

刚才被隐藏的元素会逐渐显示出来 … 再试试 切换 按钮 …

点一下，会隐藏元素 … 再点一下，会再把元素显示出来 …

持续时间

动画的开始到结果之间有一个过程，这个过程需要的时间就是动画的持续时间，这个时间的值，默认是 400 毫秒 … 我们可以把它修改成自己想要的值 ….

（#js）比如我们找到 .fadeOut() 这个方法 … 给它一个持续时间的参数 … 设置成 1000 毫秒 … 也就是动画从开始到结束会经历 1 秒钟的时间 …

回到浏览器 … 点击 隐藏 …

你会发现，元素逐渐消失的过程会变得长一些 … 因为我们修改了这个动画的持续时间 …

有时候我们也可以使用字符串来代替这个具体的时间 … fast 是 200 毫秒 … slow 是 600 毫秒 …

队列

jQuery 的这个动画是排队去执行的 … 比如我们在元素上同时调用了 .fadeIn() 还有 .fadeOut() … jQuery 会先去完成 .fadeIn() 动画 … 完成以后，接着再去执行 .fadeOut() 动画 …

(#js) 在这个显示按钮 … 先快速的显示封面图像和标题 … 然后再快速隐藏 .. 最后再慢一些逐渐显示它们 ..

$('.album').fadeIn( 'fast' ).fadeOut( 'fast' ).fadeIn( 'slow' );

回到浏览器 … 先隐藏一下这些封面 … 然后点击 显示 …

你会发现 … 封面图像会快速的逐渐显示，又逐渐消失 … 最后再慢速的逐渐显示出来 …