jQuery之动画切换的比较

1．jQuery中toggle与slideToggle以及fadeToggle的比较

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

（1）改变样式display为none

（2）设置位置高度为0

（3）设置透明度为0

都能达到这个目的，并且针对这样的处理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，还引入了toggle、sildeToggle以及fadeToggle切换方法。

 

toggle、sildeToggle以及fadeToggle的区别：

toggle：切换显示与隐藏效果

sildeToggle：切换上下拉卷滚效果

fadeToggle：切换淡入淡出效果

当然细节上还是有更多的不同点。

toggle与slideToggle细节区别：

（1）toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性。

（2）slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性。

 

fadeToggle方法

（1）fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。

（2）元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。

（3）元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。

（4）注释：隐藏的元素不会被完全显示（不再影响页面的布局）

 

附：以上内容整理自慕课网