2012-03-17 11 views
20

Tengo el siguiente código:jQuery Visible Mostrar

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

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

Por alguna razón desconocida para mí cuando utilizo el CSS funciona!

Pero cuando uso .show();

No funciona. Por favor amablemente ayuda. Soy nuevo en JQuery.

Gracias.

Editar:

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

intentado esto:

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

continuación:

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

Y sigue sin ir por alguna razón!

EDITAR: Lo raro es que está funcionando para todos los demás DIVs !!

Respuesta

24

Uso display:none; en lugar de visibilidad

Esto funciona muy bien para mí

$(function(){ 

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

});​ 

muestra de trabajo: http://jsfiddle.net/HShHg/6/

+0

Veo su muestra y está funcionando pero no puedo hacer que funcione en mi página. ¿Crees que tener una clase al mismo tiempo, así como una identificación podría causar tal comportamiento? – iTEgg

+0

Identificación de elementos debe ser único. Compruebe si hay algún otro error de script usando la pestaña de consola de Firebug – Shyju

+0

@i. ¡No, no puede! ¿tiene 'visibility: hidden' en el elemento? ¿Cómo lo escondiste? – gdoron

34

jQuery's .show() y solo funcionan en la propiedad CSS display, no en la propiedad visibility. Acabo de comprobar el código fuente de jQuery 1.7 y verifiqué que ese es el caso.

Por lo tanto, .css('display', 'none') se correspondería con .show().

Si desea cambiar la visibilidad, sólo tendría que cambiar el css directamente o hacer sus propios hideV() y showV() métodos para hacerlo por usted:

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

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

encontrado esto en los documentos: 'Elementos con ** visibilidad: oculto ** o la opacidad: 0 se consideran ser visible, ya que todavía consumen espacio en el diseño. – gdoron

+0

Esta es la respuesta correcta. – candlejack

4

De acuerdo con los documentos:

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

así que si cometió un error con el visibility, no lo ayudará.

Lo que debe hacer es, siempre oculto con .css('display', 'none') o con .hide()


Sólo he encontrado esto útil docs:

Elementos con visibilidad: oculto o la opacidad: 0 se consideran visibles, ya que aún consumen espacio en el diseño.

0

que se pegaba con poner visibility: hidden; sobre el elemento y luego usar .css("visibility", "visible"); para mostrar es precisamente porque todavía ocupa espacio en la página.

Eso evitará las páginas nerviosas mientras carga y el temido flash de contenido oculto (FOUC).

2

jQuery .show() requiere tener propiedad 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> 
Cuestiones relacionadas