JQuery: problema de desvanecimiento de div

StackOverflow https://stackoverflow.com/questions/1516904

  •  19-09-2019
  •  | 
  •  

Pregunta

Tengo div, que tiene id "contenido".Es visible. 

<div id="wrapper" style="display:block">
  <div id="content">
    Some text
  </div>
</div>

Ahora quiero desvanecerlo:

$('#wrapper').fadeIn( 1500 );
$('#content').click(function(){
   $(this).fadeOut( 1500 );
});

Y no pasa nada.Pero cuando escribí:

$('#content').fadeIn( 1500 );

Se oculta y luego vuelve a mostrarse.

aqui esta css

#content
{
    height: 100%;
    width: 100%;
}

Navegador:Firefox 3.5.3 bajo Linux Gentoo

arriba

Cuando escribo el código:

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

Se esconde correctamente.

arriba

He solucionado el problema...No puedo entender, ¿por qué fue...?Acabo de reemplazar jquery.min con jquery

¿Fue útil?

Solución

Si entiendo tu pregunta, tienes dos problemas:el contenido no desaparece y, cuando haces clic en él, el contenido no desaparece.

Es probable que ambos problemas se deban a que el script se ejecuta antes de que el contenedor y los divs de contenido aparezcan en el documento.Si tu <script> la etiqueta está en el <head> de su documento, entonces $('#wrapper') no encontrará nada para desvanecerse y $('#content') No encontrará nada a lo que adjuntar un controlador de clic.

La mejor solución probablemente sea posponer cualquier acción hasta que se cargue el documento, utilizando ready:

$(document).ready(function () {
  $('#wrapper').fadeIn(1500);
  $('#content').click(function () {
    $(this).fadeOut(1500);
  });
});

Alternativamente podrías poner tu <script> etiqueta después el <div> etiquetas en el cuerpo.

Cuando solucione este problema, el contenido se desvanecerá, pero no será fluido porque el div contenedor es inicialmente visible; style="display:block" en el div contenedor.Necesitas hacer eso display: none; en su lugar, para que el div contenedor esté oculto mientras se carga la página.

Aquí hay un archivo completo que funciona:

<html>
<head>
<style type="text/css">
#wrapper
{
    display: none;
}

#content
{
    height: 100%;
    width: 100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
  window.alert("Couldn't load jQuery");
</script>
<script>
$(document).ready(function () {
  $('#wrapper').fadeIn(1500);
  $('#content').click(function () {
     $(this).fadeOut(1500);
  });
});
</script>
</head>
<body>
<div id="wrapper">
  <div id="content">
    Some text
  </div>
</div>
</body>
</html>

Otros consejos

A mí me funciona, Firefox en OSX. Asegúrese de que sus identificadores son únicos, si usted tiene un duplicado podría no funcionar bien. Además, su estilo: el bloque es redundante, divs son bloques de forma predeterminada

.
$

he escrito ( '# de contenido') en el fadeOut y $ ( '# conent') en el fadeIn. Otro que esta los efectos están siendo llamados exactamente de la misma manera y no ofrecen ninguna explicación de por qué no tendrían tanto funciona como es debido.

También están dejando un # en "#wrapper" (línea 1 de jQuery).

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top