JQuery Visible Show

У меня есть следующий код:

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

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

По какой-то причине мне неизвестно, когда я использую CSS, он работает!

Но когда я использую .show();

Это не работает. Пожалуйста, любезно помогите. Я новичок в JQuery.

Спасибо.

Edit:

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

Пробовал это:

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

Тогда:

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

И по-прежнему не по какой-то причине!

EDIT: странно, что это работает для всех других DIV!

Ответ 1

Используйте display:none; вместо видимости

Это отлично работает для меня

$(function(){   

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

});

Рабочий пример: http://jsfiddle.net/HShHg/6/

Ответ 2

jQuery .show() и .hide() работают только с свойством CSS display, а не по свойству visibility. Я просто проверил исходный код jQuery 1.7 и подтвердил, что это так.

Итак, .css('display', 'none') будет соответствовать .show().

Если вы хотите изменить видимость, вы просто измените css напрямую или создадите свои собственные методы hideV() и showV(), чтобы сделать это для вас:

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

jQuery.fn.hideV = function() {
    this.css('visibility', 'hidden');
}

Ответ 3

Согласно документам:

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

поэтому, если вы перепутали с visibility, это не поможет вам.

Что вы должны делать, всегда скрывайте с помощью .css('display', 'none') или с помощью .hide()

Я только что нашел этот полезный docs:

Элементы с видимость: скрытые или непрозрачность: 0 считаются видимыми, поскольку они все еще потребляют пространство в макете.

Ответ 4

jQuery .show() требует наличия display:none свойства css

Ответ 5

Я бы поместил visibility: hidden; в элементе, а затем использовал .css("visibility", "visible");, чтобы показать его именно потому, что он все еще занимает место на странице.

Это позволит избежать дрожания страниц при загрузке и страшной Flash-информации о невидимом контенте (FOUC).

Ответ 6

<!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>