FadeOut mit div und jQuery - funktioniert nicht

[MelZu]

Hi,

ich möchte für unsere Website gerne eine kleine "Anfangsanimation" gestalten.
Es soll ein Startbild mit Hilfe von jQuery und fadeOut geladen werden und nach einigen Sekunden soll dann die Homeseite eingeblendet werden.

Ich hab dafür die Datei jquery-1.3.1.min.js heruntergeladen. Ich bin noch absoluter Anfänger was jQuery angeht und programmieren ist leider auch nicht so meine Stärke. :uhm:

In der index.php hab ich dann folgenden Code eingegeben:
Head:

<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#start").fadeOut(6000);
    });
    </script>
    <noscript></noscript>

Body:

<div id="start" style="display: none; "><img src="http://www.psd-tutorials.de/forum/images/start.jpg" alt=""></div>

Und in der CSS-Datei hab ich folgendes geschrieben:

#start {
    background:#fff;
    float:left;
    z-index:1;  
}

#start img {
    height:567px;
    width:921px;
}

Wenn ich es jetzt bei mir im Browser teste, dann kommt sofort die home-Seite und das Bild erscheint garnicht. Was mach ich denn da falsch? Hab jetzt schon alles probiert und immer wieder nach Tipps oder Hinweisen gesucht, aber nichts gefunden, was mir weiterhilft. Bin für jede Hilfe dankbar. Bei Bedarf kann ich auch den gesamten Code mal jemanden zuschicken.
Danke.

 

[MyBad]

AW: FadeOut mit div und jQuery - funktioniert nicht

Hi!

Du musst das Bild /den Container ja auch erst einmal anzeigen, bevor du es wieder ausblenden kannst. Momentan hat der Container "#start" display: none mitgegeben.

Wo nichts ist, kann auch nichts ausgeblendet werden

 

[Myhar]

AW: FadeOut mit div und jQuery - funktioniert nicht

MyBad hat mir die Antwort vorweggenommen ;-)

Aber kommt ein User mit deaktiviertem JS auf die Seite, dann hat er absolut keine Möglichkeit an die Hauptseite zu gelangen.
Deshalb könnte man das Skript folgendermaßen erweitern, damit das div erst mit aktiviertem JS eingeblendet wird.

<script type="text/javascript">
 $(document).ready(function() {
 $("#start").css("display","block");
 $("#start").fadeOut(6000);
 });
 </script>

Ja auch hier kann es Probleme geben, wenn der eigentliche Seiteninhalt länger zum laden braucht und das start-div erst später angezeigt wird. Man könnte zB auch das div mittels JS direkt im Dokument erzeugen, dann wäre es nur für JS Benutzer sichtbar und es kann keine Probleme geben.

Und warum verwendest du eigentlich jQuery 1.3 wenn jQuery 1.6 die aktuelle Version ist?

L. G.

 

[MelZu]

AW: FadeOut mit div und jQuery - funktioniert nicht

Okay, ich werd das mal ausprobieren. Vielen Dank!
Ähm, gute Frage . Dann werd ich das auch gleich noch mit abändern.

Noch ein blöde Frage - ich weiß. Aber wie kann ich das div denn in dem JS erzeugen. Schreib ich das da mit dazu oder schreib ich ein neues JS? Sorry, bin eben noch blutiger Anfänger

 

[mindraper]

AW: FadeOut mit div und jQuery - funktioniert nicht

So: $('body').append('<div id="start"></div>').css('display', 'block');

- oder -

$('<div id="start" style="display: block;"><img src="images/start.jpg" alt=""></div>').appendTo('body');

 

[MelZu]

AW: FadeOut mit div und jQuery - funktioniert nicht

Danke. Funktioniert auch fast.
Allerdings erscheint das Bild jetzt unten links, statt zentriert unter dem Logo und die Seite ist schon komplett da, während das Bild weg-fadet. Was muss ich denn jetzt noch machen, dass erst das Bild zu sehen ist und das weg-fadet und erst dann die Home-Seit erscheint? Und wie bekomme ich das zentriert unter das Logo?

 

[mindraper]

AW: FadeOut mit div und jQuery - funktioniert nicht

hi melzu!

wenn ich dich richtig verstanden habe, hättest du gerne, dass das bild erscheint, dann ausblendet und danach die seite geladen wird, korrekt? zunächst mal eine erklärung, wieso du erst die seite siehst, dann das bild erscheint und es dann 6 sek. lang ausblendet:

die funktion bzw. die methode ready() von jQuery ist gesplittet in mehrere untermethoden, die wie folgend aufeinander aufbauen ( im prinzip ):

1)
sobald innerhalb einer scriptdatei eine funktion an $(document).ready() übergeben wird:
$(document).ready(function(){
// dein code
});

- oder die kurzform -

$(function(){
// dein code
});

hängt jquery diese funktion in ein array namens readyList und registriert einen sog. "eventlistener" an das document ( also quasi einen "aufpasser" ), der mit eigener funktion über das readyList-Array iteriert und die darin enthaltenen funktionen abfeuert, sobald dein dokument den readyState "complete" erreicht. eine gaaaaaaaaaaanz einfache darstellung wäre:

// funktioniert im IE
var ready = function( fn ){
document.onreadystatechange = function(){
if( document.readyState === 'complete' ){
fn();
}
}
}

- oder -

// funktioniert meines wissens nach überall, erzeugt aber ziemlichen overhead
var ready = function( fn ){
var interval = setInterval(function(){
if( document.body && document.getElementById ){
clearInterval( interval );
fn();
}
}, 1 )
}

im prinzip tut jquery nichts anderes, als mit dem aufrufen der funktion zu warten, bis das HTML-DOM des dokumentes komplett geladen ist. und das ist auch der grund, wieso du das via JS erzeugte div erst siehst, nachdem deine seite geladen hat.

spontan fallen mir 3 lösungen ein, um dein problem zu fixen.

1. die eigentliche seite via AJAX nachladen. jquery bietet dir dafür hervorragende möglichkeiten, allerdings ist das nicht einfach für einen anfänger und wird daher warscheinlich für dich nicht in frage kommen.

2. eine weiterleitung. sobald das div ausgeblendet ist, lässt du den besucher einfach auf eine andere seite deiner homepage weiterleiten. das ist wesentlich einfacher als AJAX, allerdings unelegant.

3. prinzip lightbox. du schachtelst divs ineinander ( max. 2 sollten hier auf jeden fall ausreichen ), wobei das äußere die gesamthöhe und -breite des browserfensters einnimmt und das innere absolut, top: 50% und left: 50% positioniert ist, sowie mit oberem und linkem negativmargin von bildbreite * 0,5 ( also halbe bildlänge ) und bildhöhe * 0,5 versehen. dann lässt du das äußere div ausblenden. dabei wird alles innere ebenfalls ausgeblendet. das ist zwar nicht die einfachste, aber in deinem fall wohl eine relativ elegante möglichket.

noch ein wort der warnung: versuch besser nicht, das div in dein DOM einzubauen, BEVOR es vollständig geladen ist. abgesehen davon, dass du dann ohne die hilfe von jquery sondern mit vanilla-javascript arbeiten musst, ruft diese vorgehensweise meist ziemliche probleme hervor. jquery ( und meines wissens nach auch alle anderen frameworks / toolkits ) hat nicht umsonst diese methode implementiert. DOM-Injections zu machen, bevor das DOM komplett geladen wurde, ist definitiv BAD PRACTICE!

ich hoffe, das hilft dir jetzt etwas.

gruß