JQuery Visible Show

2020-05-24 20:55发布

站内问答 / jQuery
528 6 5

I have the following code:

$('#loading').css("visibility", "visible");

$('#loading').show();

For some reason unknown to me when I use the CSS it works!

But when I use .show();

It does not work. Please kindly help. I am a new to JQuery.

Thank you.

Edit:

<div class="footerOrder" id="loading" style="visibility:visible;">
      <img src="../utils/loadingExistenz.gif" width="32" height="32" border="0" />
</div>

Tried this:

<div class="footerOrder" id="loading" style="display:block;">

Then:

$('#loading').hide();

And still no go for some reason!

EDIT: Weird thing is it is working for all the other DIVs!!

6条回答
劫难
2楼-- · 2020-05-24 21:03

I would stick with putting visibility: hidden; on the element and then use .css("visibility", "visible"); to show it precisely because it still takes up space on the page.

That will avoid jittery pages while loading and the dreaded Flash of Unseen Content (FOUC).

查看更多
0人赞 添加讨论(0) 举报
戒情不戒烟
3楼-- · 2020-05-24 21:08

jQuery .show() requires to have display:none css property

查看更多
0人赞 添加讨论(0) 举报
▲ chillily
4楼-- · 2020-05-24 21:11

jQuery's .show() and .hide() only operate on the CSS display property, not on the visibility property. I just checked the jQuery 1.7 source code and verified that is the case.

So, .css('display', 'none') would be matched with .show().

If you want to change the visibility, you would just change the css directly or make your own hideV() and showV() methods to do it for you:

jQuery.fn.showV = function() {
    this.css('visibility', 'visible');
}

jQuery.fn.hideV = function() {
    this.css('visibility', 'hidden');
}
查看更多
0人赞 添加讨论(0) 举报
趁早两清
5楼-- · 2020-05-24 21:14

Use display:none; instead of visibility

This works fine for me

$(function(){   

    $("#aLink2").click(function(){
        $('#loading').show();
    });  

});​

Working sample : http://jsfiddle.net/HShHg/6/

查看更多
0人赞 添加讨论(0) 举报
可以哭但决不认输i
6楼-- · 2020-05-24 21:19

According to the docs:

.show() This is roughly equivalent to calling .css('display', 'block')

so if you messed up with the visibility, it won't help you.

What you should do is, always hide with .css('display', 'none') or with .hide()

I've Just found this useful docs:

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout.

查看更多
0人赞 添加讨论(0) 举报
聊天终结者
7楼-- · 2020-05-24 21:19 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div#sidebar-collapses').click(function(){
  if ( $("#title").is(":hidden") ) { 
    $("#title").show(); 
  } else if ( $("#title").is(":visible") ) { 
    $("#title").hide(); 
  }
})

});
</script>
</head>
<body>
<div class="sidebar-collapse" style="" id="sidebar-collapses">
     <a href="#" class="sidebar-collapse-icon with-animation">
         Test              
         <i class="menu"></i>
     </a>
 </div>
 <a href="mysite_url" id="title" style="display:none;"> <br> My Site Name </a>

</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)