jquery总结06-动画事件03-淡入淡出效果

Posted crystalhuhu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery总结06-动画事件03-淡入淡出效果相关的知识,希望对你有一定的参考价值。

.fadeout()淡出

.fadein()淡入

.fadeTaggle()淡入淡出切换

.fadeTo()淡入设定透明度

淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性,但是他们都有个共同的特点,变化的区间要么是0,要么是1

fadeIn:淡入效果,内容显示,opacity是0到1
fadeOut:淡出效果,内容隐藏,opacity是1到0

.fadeTo( duration, opacity ,callback)  opacity 可以自己设置

 

操作元素的显示和隐藏可以有几种方法。
例如:

  改变样式display为none
  设置位置高度为0
  设置透明度为0

toggle与slideToggle细节区别:
toggle:动态效果为从右至左。横向动作,toggle通过display来判断切换所有匹配元素的可见性
slideToggle:动态效果从下至上。竖向动作,slideToggle 通过高度变化来切换所有匹配元素的可见性

以上是关于jquery总结06-动画事件03-淡入淡出效果的主要内容,如果未能解决你的问题,请参考以下文章

JQuery: JQuery效果(隐藏显示切换,滑动,淡入淡出,以及动画)

jQuery-4.动画篇---淡入淡出效果

jQuery效果:隐藏显示切换滑动淡入淡出动画

淡入淡出效果 (jQuery)

jQuery动画效果之fadeIn,fadeOut(淡入淡出)

jQuery 学习02——效果:隐藏/显示淡入淡出滑动动画停止动画Callback链