Jquery .show () no revela un div con visibilidad de oculto

81

Pregunta básica de jQuery:

Estoy tratando de revelar un divque ha sido marcado como oculto usando jQuery. Pero no lo entiendo del todo

He creado un JSFiddle aquí: http://jsfiddle.net/VwjxJ/

Básicamente, quiero usar en style="visibility: hidden;"lugar de style="display: none;"como quiero que se mantenga el espacio del elemento oculto

He intentado usar show(), fadeIn()etc. pero ninguno funciona (lo hacen para style="display: none;")

¿Qué estoy haciendo mal?

javascript jquery html

— ChrisCa
fuente

6

Intente cambiar el marco en su jsfiddle a jQuery.

— 2011

1

@ a'r: El problema persiste . Aquí hay una versión corregida: jsfiddle.net/fkling/9Z6nt/19

— Felix Kling

En su ejemplo, no configuró la biblioteca correcta para su proyecto, en "elegir marco" debe elegir "jQuery".

— megas

5

+1 para contrarrestar los votos negativos ... la gente debería pasar más tiempo tratando de entender el problema ...

— Felix Kling

5

Creo que fue porque otras personas pensaron que simplemente se olvidó de seleccionar la biblioteca correcta (y después de cambiarla, pareció funcionar). Pero no leyeron su pregunta y el código detenidamente. ¿Por qué más el primer comentario obtendría 5 votos a favor? Sí, tal vez su jsfiddle no era correcto, pero eso no es motivo para votos negativos en mi opinión. El problema estaba claro incluso sin eso (y era fácil de solucionar).

— Felix Kling

123

Si lo ha ocultado con visibility:hidden, puede mostrarlo con jQuery por

$(".Deposit").css('visibility', 'visible');

Y en el violín te falta jQuery. Aquí hay una demostración: http://jsfiddle.net/9Z6nt/20/

— Muhammad Usman
fuente

document.readyno es necesario. Se ejecuta el código onLoad(cuadro de selección encima de los marcos).

— Felix Kling

Oh, no me di cuenta de eso, gracias. Pero será útil en código real si se llama a JS antes de que DOM esté listo.

— Muhammad Usman

1

@Imray Lo hace. No es por la solución de visibility:hidden, solo arreglé la suya.

— Muhammad Usman

11

Según la documentación de JQuery, .show()"es aproximadamente equivalente a llamar .css('display', 'block'), excepto que la propiedad de visualización se restaura a lo que era inicialmente". Establezca el estilo explícitamente en su lugar. Podrías usar una clase CSS

.hidden{
    visibility: hidden;
}
.shown{
    visibility: visible;
}

y el conjunto está usando

$("#yourdiv").removeClass("hidden").addClass("shown");

— Polymorphix
fuente

$("#yourdiv").toggleClass('hidden'); no hay necesidad de la clase "mostrada"

— Alexander Bird

1

No es exactamente lo mismo. Depende de posibles anulaciones más generales en otras partes del CSS, pero por lo general probablemente se salga con la suya, sí.

— Polymorphix

7

Si desea que se mantenga el espacio del elemento oculto, use opacidad.

es decir:

$('div').fadeTo(500,1) //show
$('div').fadeTo(500,0) //hide

por ejemplo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style='opacity:0'>
  Test opacity
</div>


<button onclick="$('div').fadeTo(500,1);">Show</button>
<button onclick="$('div').fadeTo(500,0);">Hide</button>

Expandir fragmento

— MJ Vakili
fuente

3

Oye, tu violín está funcionando, solo elige framework jQuery en el violín. Si su visibilidad está oculta, cambie la propiedad de visibilidad css a visible.

(".Deposit").css('visibility','visible');

— sushil bharwani
fuente

2

aquí vamos :)

$(".Deposit").show();

    $(".Deposit").fadeOut(500,function(){
        $(this).css({"display":"block","visibility":"hidden"});

    });

— George Matiashvili
fuente

sí, ese es el boleto!

— Kirby

0

$(".Deposit").show();

$(".Deposit").fadeTo(500,0);

— George Matiashvili
fuente