jQuery学习笔记第六节/Jq的效果之淡入淡出
淡入淡出
其实淡入淡出的一个动画原理就是调整元素的透明度,更多精彩内容,请往下看...
在 jq 中有四种方法可以让元素执行一个淡入淡出的效果,如下所示:
fadeIn()fadeOut()fadeToggle()fadeTo()
下面开始对每一个方法进行一个详细的说明:
1.fadeIn()
这个方法会让已经隐藏的元素淡入...和 show.hide类似,可以没有参数,也可以有1个或者2个参数.参数1是动画执行的时间,可选 slow.fast.或者毫秒时间.第二个参数是动画执行完毕的回调函数.
1.//这个代码展示的是 fadeIn()的使用
2.
3.
4.
5.
6. 2.fadeOut()
和上面的方法是相反的,这个方法会将已经显示的元素淡出.淡入淡出的原理其实就是改变了这个元素的透明度,前者是0到1,后者是从1到0
1.//这段代码演示的是如何使用 fadeOut()来动画隐藏一个已经存在的元素.
2.$("#danchu").click(function(){
3. $(".content_two").fadeOut("slow",function(){
4. //回调函数会改变这个元素的 text 和 css.
5. $(this).text("我是fadeOut 出去的,呵呵哒!").css("height","200px");
6. });
7.})
和上面的方法刚好是相反的,其实也是很简单的啦...
3.fadeToggle().
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
和 show().hide()这两个方法的 toggle()是一样的.就是在两个状态之间进行取反操作.
废话不多说,直接上代码
1.
2.
3.
4.
6.
15.
16.
17. Demonstrate fadeToggle() with different speed parameters.
18.
19.
20.
21.
22.
23.
24.
4.fadeTo()
这个方法很容易就可以联想到是设置什么东西,然后我们想到了 fade 动画的原理其实就是设置一个元素透明度.但是默认的的方法会将元素从0->1或者是从1->0这样变化的.使用 fadeTo()我们多了一个参数,我们可以设置透明度的值!我们可以自定义元素的动画结束的时候,元素的透明值是多少.真的是爽歪歪.
废话不多说,直接看代码:
1.//下面这段代码的意思就当点击 button的时候改变 div1,2,3的透明度,分别设置了0.15,0.4,0.7.
2.//可以看出来这个fadeTo()这个方法可以设置3个参数,分别是动画执行的事件,透明度的数值.以及最后动画执行完毕的回调函数.
3.$("button").click(function(){
4. $("#div1").fadeTo("slow",0.15);
5. $("#div2").fadeTo("slow",0.4);
6. $("#div3").fadeTo("slow",0.7);
7.});
结束:关于淡入淡出的动画的方法写到了这里就算是结束了...这一节的 B 装完了,撒花鼓掌,退朝~