JQuery Visible Show - PullRequest
Новая
       10

JQuery Visible Show

26 голосов
/ 18 марта 2012

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

$('#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();

И все равно по какой-то причине не идет!

РЕДАКТИРОВАТЬ: странная вещь, это работает для всех других DIVs !!

Ответы [ 6 ]

38 голосов
/ 18 марта 2012

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');
}
28 голосов
/ 18 марта 2012

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

Это прекрасно работает для меня 

$(function(){   

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

});​

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

5 голосов
/ 18 марта 2012

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

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

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

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

Я только что нашел это полезным документы :

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

3 голосов
/ 02 февраля 2017

jQuery .show() требуется иметь display:none css свойство

1 голос
/ 02 февраля 2017

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

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

0 голосов
/ 20 мая 2017 
<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...