Question

我有一个像下面这样的html图像元素，默认情况下应隐藏

<img 
  id="leftL" 
  src="anchors/Left.png"  
  style="
    width: 30px; 
    height: 24px;
    position:absolute;
    cursor:w-resize;
    visibility:hidden
  "
/>

但在某些情况下我需要显示图像。

我尝试过jQuery $("#leftL").css('visibility','visible')和$("#leftL").show()。

两者都不适用于我的情况。但是，如果我从样式中删除visibility:hidden并使用$("#leftL").css('visibility','hidden')隐藏它，则会有效。

我正在我的网页中加载大图片，因此当我使用$("#leftL").css('visibility','hidden')时，Left.png将会显示一段时间。

有没有办法克服这个问题？

Answer 1

使用visibility属性，而不是CSS display属性。

这就是jQuery .show()＆amp; .hide()更改，因此您的可见性状态将保持一致。

这大致相当于调用.css（'display'，'block'），除了 display属性恢复到最初的状态

http://api.jquery.com/show/

因此而不是：

visibility:visible使用display:block
visibility:hidden使用display:none

Answer 2

您的代码必须像

<img 
  id="leftL" 
  src="anchors/Left.png"  
  style="
  width: 30px; 
  height: 24px;
  position:absolute;
  cursor:w-resize;
  display:none;
  "
/>

并且在jQuery中确实喜欢$("#leftL").show();或$("#leftL").hide();

Answer 3

jQuery show()和hide()方法适用于显示样式属性，而不是可见性。因此，您可能希望在图像上使用display:none而不是visibility:hidden，然后您可以使用jQuery show和hide方法。

Answer 4

查看http://api.jquery.com/hide/似乎.hide（）编辑了css属性“display”

如果在你的风格中使用！important，例如display：none！important，有必要使用.css（'display'，'block）覆盖样式！important'）你希望.show（）能正常运行吗？

使用

<div style="display:none"></div>

解决问题？

使用jQuery隐藏和显示html元素

4 个答案: