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

Respuestas:

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