jQuery中toggle与slideToggle以及fadeToggle的比较，jQuery基础(四)

第4章动画切换的比较
编程：4-1 jQuery中toggle与slideToggle以及...

jQuery中toggle与slideToggle以及fadeToggle的比较

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

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

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

toggle、sildeToggle以及fadeToggle的区别：

toggle：切换显示与隐藏效果
sildeToggle：切换上下拉卷滚效果
fadeToggle：切换淡入淡出效果

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

toggle与slideToggle细节区别：

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

fadeToggle方法

fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。
元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。
注释：隐藏的元素不会被完全显示（不再影响页面的布局）

任务

?不会了怎么办

index.html

1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

问答
评论
笔记
代码

全部精华我要发布

为什么演示的时候toggle效果也是竖向的呢？

已采纳回答 / 旭来哥

toggle：直接显示、隐藏，如果有【时间参数】且【匹配的元素有宽度属性】，则动态效果为左上角-右下角拉卷效果，透明度0-1之间的变化；若有时间参数但是【匹配的元素没有宽度属性】，则动态效果为上下拉卷的效果，且没有透明度的变化。<p>标签没有宽度属性,可以改下代码,将"p"标签换成"div"标签就可以看到了.

2 回答 728 浏览

2022-04-20

为何是animation.val()来取value的值而不是option？

已采纳回答 / 千金不如一默

因为option的value才是select的值，select可以有多个备选值，你选中哪个就是哪个。 animation是select的ID。

1 回答 1329 浏览

2017-06-16

slow和fast表示延迟，和具体的1000毫秒这样的数据是一个意思？

已采纳回答 / 凛MK

"fast"就相当于200毫秒，"slow就相当于600毫秒，和具体1000毫秒都是整个运动需要的时间

2 回答 2993 浏览

2017-04-29

隐藏的元素不会被完全显示（不再影响页面的布局）是不是可以理解为fadeToggle() 最后display=none?

最赞回答 / 旅行的风筝

经过实际的测试toggle:height,width,margin均会变化。完成后设置display完成转换也就是none和block的切换slideToggle主要为height变化但是margin也会变化最后设置displayfadeToggle:通过设置opacity不透明度来完成最后设置display也就是说三者都会设置通过设置display来达到隐藏的目的实现方式决定了动画效果。

1 回答 1953 浏览

2017-04-12