JQuery - div dissolvenza guai

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

  •  19-09-2019
  •  | 
  •  

Domanda

ho div, che ha 'contenuto' id. E 'visibile. 

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

Ora voglio svanire fuori: 

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

E non succede nulla. Ma quando ho scritto: 

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

Si nasconde e poi mostra ancora una volta.

Ecco css 

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

Browser: Firefox 3.5.3 Linux Gentoo

UPD

Quando digito il codice: 

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

Si nasconde in modo corretto.

UPD

Ho risolto problema ... non riesco a capire, perché è stato ... Basta sostituito jquery.min con jQuery

È stato utile?

Soluzione

Se ho capito la tua domanda, ci sono due problemi:. Il contenuto non svanisce, e quando si fa clic su di esso, il contenuto non svanisce fuori

Entrambi i problemi sono probabilmente causati dallo script l'esecuzione prima div involucro e contenuto sono apparsi nel documento. Se il tag <script> è nel <head> del documento, quindi $('#wrapper') Non troverete niente di fade in e $('#content') Non troverete niente di allegare un gestore di clic per.

La soluzione migliore è probabilmente di rinviare fare nulla fino a quando il documento viene caricato, utilizzando ready: 

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

In alternativa si potrebbe mettere il tag <script> dopo i tag <div> nel corpo.

Quando si risolvere questo problema il contenuto svanirà, ma non sarà liscia perché il div wrapper è inizialmente visibile avete style="display:block" sul div wrapper. Hai bisogno di fare che display: none; invece in modo che il div involucro è nascosto, mentre il caricamento della pagina.

Ecco un file completo che funziona: 

<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>

Altri suggerimenti

Funziona per me, Firefox su OSX. Assicurarsi che l'ID sono uniche, se si dispone di una copia potrebbe non funzionare bene. Inoltre, il tuo stile: blocco è ridondante, div sono blocchi di default

.
$

Hai ha scritto ( '# content') nella fadeOut e $ ( '# conent') nella fadeIn. Altro che questi effetti sono chiamati esattamente allo stesso modo e non offrono una spiegazione sul motivo per cui essi non sarebbero entrambi funziona come previsto.

Si sono anche lasciando un # in "#wrapper" (linea 1 di jQuery).

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top