Wie kommen meine div-fade-out mit jQuery auf der Seite geladen?

Ich bin ganz neu in jQuery (und javascript im Allgemeinen). Ich habe Sinn, es zu benutzen/lernen, es für einige Zeit, und nows die Zeit.

Also werde ich jQuery verwenden auf dieser Seite fade out "under construction" - Warnung am oberen Rand der Seite auf laden. Aber ich bin nicht vertraut mit einer der Funktionen oder Selektoren zu verwenden.

Fand ich dieser basic-Artikel an jQuery was hat eine demo, die zu funktionieren scheint perfekt für das, was ich mache, nur das fade out klicken.

Was muss ich ändern, um es zu verblassen nach ein paar Sekunden nachdem die Seite geladen wurde, können Sie zeigen Sie mir, wo zu sehen, erfahren Sie mehr über diesen Typ von Funktionen (speziell auf jQuery-Website, wenn Sie die kennen). Und bitte nicht sagen, "In der Dokumentation." Ich bin ein noob, aber kein dummy, vielen Dank. Ich versuche nur zu lernen, mehr über diesen speziellen Bereich der syntax verantwortlich für die Funktionen, für jetzt (wenn es das ist, was Sie genannt werden).

Dude, ich Liebe den Ort. Liebe die Schatten auf den text. Liebe die einzigartige Idee, und die Liebe die Hommage auf JC in der CSS.
Vielen Dank für die freundlichen Worte, Mann!
Nur ein Vorschlag: Wenn Sie fügen Sie einige styling zu Ihrem "under construction" - div. Sie können Ihre Seite nach oben rutscht, wenn dein div ausgeblendet. So etwas wie "<div id="tempwarning" style="z-index:100;position:absolute;top:0px;left:0px; width:100%;">" sollte funktionieren.
PS: jagboards.com ist ein broken link auf Ihrer website. 😉
toller Vorschlag. Danke! @rockinthesixstring, vielen Dank für das heads-up. Ich war die Umschaltung der domain von GoDaddy, Bluehost und muss vergessen alles um die Weiterleitungen wieder.

InformationsquelleAutor Joel Glovier | 2010-08-03

  1. 7
    $(document).ready(function() {
   window.setTimeout("fadeMyDiv();", 3000); //call fade in 3 seconds
 }
)

function fadeMyDiv() {
   $("#myDiv").fadeOut('slow');
}
    Konnte es nicht zu arbeiten - und nicht sicher sind, welche Teile dieser zu ersetzen, die mit meiner eigentlichen id. Gerade dieses Stück? $("#tempwarning")
    Ja, wenn tempwarning ist das ID-Attribut des div, die Sie möchten, zu verblassen.
    OK, jetzt funktioniert es. Ich glaube, ich hatte einen Fehler in meinem link zu der jQuery-Bibliothek.
    BTW, Woher weiß ich wo ich meine scripts? Es scheint so, dass einige gehören in den Kopf, und einige direkt vor das schließende body-tag?
    Skripts laden Sie ein zu einer Zeit. Da bist du mit dem $(document).bereit sind, dann können Sie Ihre Skripte am Ende (in diesem Fall). Stellen Sie sicher, dass die jquery-Bibliothek platziert werden, bevor Sie Ihre Funktion. Eine gute Faustregel ist, um tatsächlich versuchen, so viel von Ihrer Skripte an der Unterseite, wie möglich.

    InformationsquelleAutor JohnFx

  2. 8

    Neue jQuery 1.4 ist die Verzögerung Methode. Verwenden es für diesen Zweck:

    $("#myDiv").delay(3000).fadeOut("slow");
    Genial, hat mich gelehrt, etwas neues!
    Verzögerung ist toll 🙂

    InformationsquelleAutor cnanney

  3. 2

    Hey, die Seite sieht cool aus. Dies sollte es tun für Sie.

    $(document).ready(function() {
    setTimeout(fade, 2000);
}

function fade(){
   $("#tempwarning").fadeOut(1000);
}
    Funktioniert nicht. Es ist jetzt da, aber nichts zu tun.
    Ok, ich denke, ich hatte vielleicht ein Fehler in meinem link zu der jQuery-Bibliothek. Danke für deine Antwort.
    Kein problem. Möchten Sie vielleicht zu prüfen, in firebug, oder firebug lite. 😉
    Ich könnte auch vorschlagen, dass Sie eine bestimmte version von der Google API CDN : code.google.com/apis/libraries/devguide.html#jquery

    InformationsquelleAutor Derrick

  4. 2

    Hier ist ein komplettes Beispiel.

    Fügen Sie diesen in eine html-Datei und speichern Sie es.

    <html>
<head>
    <script src="http://code.jquery.com/jquery-1.4.2.min.js" />
    <script>
    $(document).ready(function(){   
        window.setTimeout('fadeout();', 3000);
    });

    function fadeout(){
        $('#tempwarning').fadeOut('slow', function() {
           //Animation complete.
        });
    }

    </script>
</head>
<body>
    <div id="tempwarning">

        <div class="wrap">

            <span class="warning-icon">!</span>

            <p>
                Oops! Please pardon my appearance. I'm still <a href="http://graphicriver.net/item/under-construction-graphic/53758?ref=jglovier">under development</a>. Please visit often.
            </p>

        </div>

    </div>
</body>
</html>

    EDIT:

    Dieser code-Zeile:

     $(document).ready(function() { });

    Wartet, bis die Seite geladen ist, bevor ausführen etwas im inneren.

    Sie müssen noch code, der wartet ein paar Sekunden vor dem ausbleichen.
    Sehr wahr, ich vermisste, dass ein Teil in der Frage. Super Antwort, übrigens!

    InformationsquelleAutor Brandon Boone

  5. 1
    $(document).ready(function(){
    setTimeout(function(){ $("#tempwarning").fadeOut(); }, 2000);
});
    Dies wird nicht anhalten für ein paar Sekunden, bevor Sie verblassen heraus, wie angegeben durch die OP
    So viel nur für das Lesen der Titel.
    Das ist, warum es gibt einen edit-button. =)

    InformationsquelleAutor You

Schreibe einen Kommentar