2012-03-17 14 views
20

Mam następujący kod:JQuery Widoczne Pokaż

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

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

Z jakiegoś powodu nieznanego do mnie, kiedy użyć CSS to działa!

Ale kiedy używam .show();

To nie działa. Uprzejmie proszę o pomoc. Jestem nowy w JQuery.

Dziękuję.

Edit:

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

Tried to:

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

Następnie:

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

i nadal nie ma Go z jakiegoś powodu!

EDYTOWANIE: Dziwne jest to, że działa dla wszystkich innych DIV !!

Odpowiedz

24

Zastosowanie display:none; zamiast widoczności

Działa to dobrze dla mnie

$(function(){ 

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

});​ 

próbki robocze: http://jsfiddle.net/HShHg/6/

+0

Widzę twoją próbkę i działa, ale nie mogę jej uruchomić na mojej stronie. Czy uważasz, że posiadanie klasy w tym samym czasie, a także identyfikator może spowodować takie zachowanie? – iTEgg

+0

identyfikatory elementów powinny być niepowtarzalne. Sprawdź, czy jest jakiś inny błąd skryptu za pomocą karty konsoli firebug – Shyju

+0

@i. Nie, nie może! masz "widoczność: ukryta" na elemencie? jak to ukryłeś? – gdoron

34

jQuery .show() i .hide() działać tylko na własność CSS display, a nie na posesji visibility. Właśnie sprawdziłem kod źródłowy jQuery 1.7 i zweryfikowałem, że tak jest.

Tak, .css('display', 'none') zostanie dopasowany do .show().

Jeśli chcesz zmienić widoczność, należy po prostu zmienić css bezpośrednio lub tworzyć własne hideV() i showV() sposobów, aby to zrobić dla Ciebie:

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

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

Znalazłem to w docs: 'elementów z ** visibility: hidden ** lub krycie: 0 uznaje się za widoczne, ponieważ nadal zużywają miejsca w układ. " – gdoron

+0

To jest właściwa odpowiedź. – candlejack

4

Zgodnie z docs:

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

więc jeśli zepsujesz z visibility, to ci nie pomoże.

Co należy zrobić, to zawsze ukryć z .css('display', 'none') lub .hide()


Właśnie znaleziono Ta użyteczna docs:

elementów z visibility: hidden lub krycie: 0 są uważane za widoczne, ponieważ nadal zajmują miejsce w układzie.

0

chciałbym trzymać oddanie visibility: hidden; na elemencie, a następnie użyć .css("visibility", "visible"); pokazać właśnie dlatego, że nadal zajmuje miejsce na stronie.

Pozwoli to uniknąć niestabilnych stron podczas ładowania i przerażającego błysku niewidzialnej treści (FOUC).

2

jQuery .show() wymaga posiadania mienia display:none CSS

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