jQuery中显示元素的show方法，jQuery基础(四)

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

jQuery中显示元素的show方法

css中有display:none属性，同时也有display:block，所以jQuery同样提供了与hide相反的show方法

方法的使用几乎与hide是一致的，hide是让元素显示到隐藏，show则是相反，让元素从隐藏到显示

看一段代码：使用上一致，结果相反

$('elem').hide(3000).show(3000)

让元素执行3秒的隐藏动画，然后执行3秒的显示动画。

show与hide方法是非常常用的，但是一般很少会基于这2个属性执行动画，大多情况下还是直接操作元素的显示与隐藏为主

注意事项：

show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置
如果使用!important在你的样式中，比如display: none !important，如果你希望.show()方法正常工作，必须使用.css('display', 'block !important')重写样式
如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度

任务

?不会了怎么办

index.html

1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

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

问答
评论
笔记
代码

全部精华我要发布

代码不执行

最赞回答 / 十指狂魔

以后代码再出现这种问题将<...code...>改为<...code...>

3 回答 1370 浏览

2019-06-30

仔细看你的代码，里面有三个button，你在js里为show()方法绑定的是button:first，第一个按钮，但是你的第一个按钮不是<button>直接show动画</button>这个，而是<button class="ad_submit" name="Submit3" type="submit">提交</button>这个提交按钮，所以怎么会实现呢？为你的show按钮加上id，就行了<...图片...>

1 回答 1581 浏览

2018-08-09

$("#a1").hide(3000).show()，将show()的参数去掉后出现的问题

已采纳回答 / 阿叶子

是不是因为前面把#a1 隐藏了的原因呢

2 回答 2067 浏览

2017-12-10

哪位大神瞧瞧，换了用判断语句写了之后点击能隐藏，但不能自动显示了。请问是哪出了问题？？

已采纳回答 / 郭越呱呱呱

show（）、hide（）方法修改的是元素的高度、宽度、透明度；不会修改字符长度的，所以不能用.length判断<...code...>

5 回答 1406 浏览

2018-04-22

请教一个小问题，关于判断语句的

已采纳回答 / qq_說些什庅_0

你这是事件绑定，if语句只执行一次！要改成这样：var n=false; $("#btn1").click(function(){ if(!n){ $("#a1").hide(1500,function(){ alert("我隐藏了"); n=true; console.log(n); }); }else{ $("#a1")....

4 回答 1059 浏览

2018-11-11

加个无限循环为什么就卡住了，没有无线执行？代码如下

已采纳回答 / 主宰灵魂

应该这么改<...code...>

3 回答 1869 浏览

2018-06-21

给1个实用性，欢迎提意见

已采纳回答 / 慕圣2251184

打开新窗口打开地图，关闭地图

2 回答 971 浏览

2017-04-08

div绑定鼠标离开事件，隐藏div，但是我快速离开时，div不会隐藏

最赞回答 / 我就叫李二毛

我不知道你想表达什么。你的代码，我们分析一下，初始是全部都显示的。当鼠标移入#a1-1,#a2-2,#a3-3,#a4-4,#a5-5 id为这些的时候，这些div隐藏。时间为1s。然后#a1-1,#a2-2,#a3-3,#a4-4,#a5-5这些div的下面的兄弟开始显示，时间为一秒，（这时候下面的#a1,#a2,#a3,#a4,#a5" 也就是这些已经是显示的，所以没效果。）当你鼠标移出（#a1,#a2,#a3,#a4,#a5"），这些的时候，你设置的是隐藏，时间为1s，但是你的下一句$(this)....

1 回答 4489 浏览

2017-01-31

jquery动画篇1-3， #a1设置display: none !important，然后再 $("#a1").css('display', 'block !important'); $("#a1").show(3000); }); 为什么动画不能显示

+ 我来回答回答最高可+2积分

7 回答 2775 浏览

2022-04-04

这里是用到了promise吗？

最新回答 / 名分开就是姓名

显示的动画是在隐藏动画完成之后执行的，明显是回掉函数方式实现的，但是代码上却不是回掉函数的写法，所以很好奇是用了promise吗？还是其他什么方式来实现的

2 回答 993 浏览

2016-11-10

$("#a1").hide(3000).show(3000) $("#a1").hide().show()

最新回答 / 6666666999

$("#a1").hide(3000).show(3000) $("#a1").hide().show(）程序由上往下执行

1 回答 1054 浏览

2016-11-02

hide 只选择变化高度

已采纳回答 / qq_哗哗_03383445

好像那个只能借助于动画了,上面的高度是指动态的高度,不是指设定意义上的高度,可以用 animate 这个属性: $("button:last").click(function(){ $(".right").animate({ height:'150px', });});记得把.right 的 display:none注释掉

2 回答 1083 浏览

2016-12-22

怎么让hide().show()动画无限循环？

已采纳回答 / Char_n

可以考虑在外面加一个while(true){}的循环

7 回答 2203 浏览

2018-06-21

jquery hide() show()

最新回答 / 慕粉1519242657

<...code...>禁用按钮<...code...>学到了感谢上面的两位

5 回答 1585 浏览

2017-07-10

全部我要发布

最热最新

只看我的

1-3 jQuery中显示元素的show方法