¿Cómo ocultar un div con jQuery?

82

Cuando quiero ocultar un HTML <div>, uso el siguiente código JavaScript:

var div = document.getElementById('myDiv');
div.style.visibility = "hidden";
div.style.display = "none";

¿Cuál es el equivalente de ese código en jQuery?

javascript jquery

— kamaci
fuente

154

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

o

$('#myDiv').slideUp();

o

$('#myDiv').fadeOut();

— Sujit Agarwal
fuente

En realidad, los tres son iguales display:nonecon solo tres efectos de animación diferentes. ¡La respuesta correcta es @ honk31 .css("visibility", "hidden")y hay un propósito! Lo visiblity:hiddendiferente display:nonesigue usando el espacio mientras display:nonese comporta como si nunca hubiera existido allí.

— Desarrollador

1

@ Desarrollador Si bien es un punto interesante y potencialmente útil, no veo absolutamente nada que indique que su solución fue el efecto deseado. Por el contrario, parece que el OP lo encontró para responder bastante bien a su pregunta. También para mis propósitos, continuar ocupando el espacio sería bastante indeseable. No seas arrogante.

— donutguy640

Como solíamos decir antes de RTFM. En la publicación inicial, una persona pregunta cuál es la diferencia entre visibilidad = "oculta" y pantalla = "ninguna", ¿alguna vez preguntó cómo hacer una animación oculta? ¡Quédate con el tema!

— Desarrollador

27

Fácil:

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

http://api.jquery.com/hide/

— ctcherry
fuente

27

$("#myDiv").hide();

establecerá la pantalla css en none. si también necesita configurar la visibilidad como oculta, podría hacerlo a través de

$("#myDiv").css("visibility", "hidden");

o combinar ambos en una cadena

$("#myDiv").hide().css("visibility", "hidden");

o escribir todo con una función css ()

$("#myDiv").css({
  display: "none",
  visibility: "hidden"
});

— honk31
fuente

Esta respuesta debe seleccionarse como correcta, ¡no tengo idea de por qué la gente votó por una respuesta completamente incorrecta!

— Desarrollador

14

Si desea que el elemento mantenga su espacio, debe usar,

$('#myDiv').css('visibility','hidden')

Si no desea que el elemento conserve su espacio, puede usar,

$('#myDiv').css('display','none')

o simplemente,

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

— alcance especial
fuente

7

$("myDiv").hide();y $("myDiv").show();no funciona tan bien en Internet Explorer.

La forma en que solucioné esto fue obtener el contenido html de myDivusing .html().

Luego lo escribí en un DIV recién creado. Luego agregué el DIV al cuerpo y agregué el contenido de la variable Contenty HiddenFieldluego leí el contenido del div recién creado cuando quería mostrar el DIV.

Después de usar el .remove()método para deshacerme del DIV que contenía temporalmente mi html DIV.

var Content = $('myDiv').html(); 
        $('myDiv').empty();
        var hiddenField = $("<input type='hidden' id='myDiv2'>");
        $('body').append(hiddenField);
        HiddenField.val(Content);

y luego cuando quise MOSTRAR el contenido nuevamente.

        var Content = $('myDiv');
        Content.html($('#myDiv2').val());
        $('#myDiv2').remove();

Esto era más confiable que los métodos .hide()& .show().

— Cecil Theodore
fuente

6

$('#myDiv').hide() ocultará el div ...

— sajoshi
fuente

2

$('#myDiv').hide(); La función de ocultar se usa para editar contenido y la función de mostrar se usa para mostrar nuevamente.

Para obtener más información, haga clic en este enlace .

— Nand Kishore Agarwal
fuente