2012-03-17 15 views
20

Ho il seguente codice:JQuery Visibile Visualizza

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

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

Per qualche motivo a me sconosciuto quando uso il CSS funziona!

Ma quando uso .show();

Non funziona. Si prega gentilmente di aiutare. Sono un nuovo di JQuery.

Grazie.

Edit:

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

provato questo:

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

Poi:

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

E ancora non va per qualche ragione!

MODIFICA: La cosa strana è che funziona per tutti gli altri DIV !!

risposta

24

Uso display:none; invece di visibilità

Questo funziona bene per me

$(function(){ 

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

});​ 

campione di lavoro: http://jsfiddle.net/HShHg/6/

+0

Vedo il tuo esempio e funziona ma non riesco a farlo funzionare nella mia pagina. Pensi che avere una classe allo stesso tempo e un ID possa causare un simile comportamento? Gli ID – iTEgg

+0

devono essere univoci. Controlla se ci sono altri errori di script nella scheda console Firebug – Shyju

+0

@i. No non può! hai 'visibilità: nascosta' sull'elemento? come l'hai nascosto? – gdoron

34

jQuery's .show() e .hide() funzionano solo sulla proprietà CSS display, non sulla proprietà visibility. Ho appena controllato il codice sorgente di jQuery 1.7 e verificato che sia il caso.

Quindi, .css('display', 'none') corrispondere a .show().

Se si desidera modificare la visibilità, si sarebbe solo cambiare il css direttamente o fare il vostro proprio hideV() e showV() metodi per farlo per voi:

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

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

Abbiamo trovato questo nella documentazione: 'Elementi con ** visibility: hidden ** o opacità: 0 sono considerati per essere visibile, dal momento che ancora consumano spazio il layout. – gdoron

+0

Questa è la risposta giusta. – candlejack

4

Secondo la documentazione:

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

quindi se hai incasinato con il visibility, non ti aiuterà.

Che cosa si dovrebbe fare è, nascondo sempre con .css('display', 'none') o con .hide()


ho appena trovato questo utile docs:

Elementi con visibility: hidden o opacità: 0 sono considerati visibili, poiché occupano ancora spazio nel layout.

0

vorrei bastone con mettere visibility: hidden; sull'elemento e quindi utilizzare .css("visibility", "visible"); per mostrare proprio perché occupa ancora spazio sulla pagina.

Ciò eviterà pagine agitate durante il caricamento e il temuto Flash di contenuti non visualizzati (FOUC).

2

jQuery .show() richiede di avere proprietà 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> 
Problemi correlati