JQuery - Div -Fading -Ärger

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

  •  19-09-2019
  •  | 
  •  

Frage

Ich habe DIV, das ID -Inhalt hat. Es ist sichtbar. 

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

Jetzt möchte ich es verblassen:

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

Und nichts passiert. Aber als ich schrieb:

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

Es versteckt sich und zeigt sich dann wieder.

Hier ist CSS

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

Browser: Firefox 3.5.3 unter Linux Gentoo

Aktualisierung

Wenn ich Code eingeben:

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

Es versteckt sich richtig.

Aktualisierung

Ich habe ein Problem gelöst ... Ich kann nicht verstehen, warum war es ... nur jQuery ersetzt.

War es hilfreich?

Lösung

Wenn ich Ihre Frage verstehe, haben Sie zwei Probleme: Der Inhalt verblasst nicht und wenn Sie darauf klicken, verblasst der Inhalt nicht.

Beide Probleme werden wahrscheinlich durch Ihr Skript verursacht, das vor der Ausführung der Wrapper- und Inhaltsdivs im Dokument aufgetreten ist. Wenn dein <script> Tag ist in der <head> Ihr Dokument dann $('#wrapper') wird nichts finden, um in und zu verblassen $('#content') Findet nichts, um einen Klick -Handler hinzuzufügen.

Die beste Lösung ist wahrscheinlich, etwas zu tun, bis das Dokument geladen wird, indem das Dokument verwendet wird, indem Sie verwendet werden ready:

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

Alternativ könnten Sie Ihre platzieren <script> Schild nach das <div> Tags im Körper.

Wenn Sie dieses Problem beheben, wird der Inhalt verblasst, aber es wird nicht reibungslos sein, da die Wrapper Div ursprünglich sichtbar ist - Sie haben haben style="display:block" auf der Wrapper Div. Sie müssen das machen display: none; Stattdessen, damit die Wrapper Div während des Ladens der Seite versteckt ist.

Hier ist eine vollständige Datei, die funktioniert:

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

Andere Tipps

Es funktioniert für mich, Firefox auf OSX. Stellen Sie sicher, dass Ihre IDs eindeutig sind. Wenn Sie ein Duplikat haben, funktioniert es möglicherweise nicht richtig. Auch Ihr Stil: Block ist überflüssig, Divs sind standardmäßig Blöcke.

Sie haben $ ('#content') im Fadeout und $ ('#conent') im Fadein geschrieben. Andere, dass dies die Effekte genauso genannt werden und keine Erklärung dafür geben, warum sie nicht wie erwartet arbeiten würden.

Sie verlassen auch eine # draußen in "#Wrapper" (Zeile 1 von JQuery).

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top