Geht diese jquery-Animation auch elegenater?

[woffi]

Moin,

dieser Code funktioniert und bewirkt, dass die ID "eins" (das ist ein JPG) nach 1 Sekunde Wartezeit innerhalb von 1,5 Sekunden eingeblendet wird.

<script type="text/javascript">
$(document).ready(function() {
$('#eins').delay(1000).fadeIn(1500);
});
</script>

Nachteil ist, dass ich im Style-Sheet

#eins {
display: none;
}

einfügen muss, was wiederum bei deaktiviertem JavaScript bewirkt, dass das Bild überhaupt nicht da ist.

Gibt es da nicht eine elegantere Lösung, sodass das Bild dann einfach (natürlich ohne Animation) angezeigt wird?

Gruß und Dank
woffi

 

[Myhar]

AW: Geht diese jquery-Animation auch elegenater?

Natürlich gibt es eine elegantere Lösung. Ich nehme einmal an, dass du nicht nur wissen wolltest, ob es so etwas gibt, sondern auch, wie das geht ;P
Diese Möglichkeit kannst du bei allen Elementen, welche du für Leute mit deaktiviertem JS anzeigen willst, verwenden.
Zuerst legst du ein Stylesheet an, welches nur die Styles für JS User beinhaltet
ZB:

/*Im Standard Stylesheet*/
.hiddenJSClass {display:block} /*Damit wird jedes Element mit der Klasse für User ohne JS angezeigt*/

/*In dem zweiten Stylesheet (zB mit dem Namen onlyForJS.css ) */
.hiddenJSClass {display:none}/*Damit wird jedes Element mit der Klasse für User mit JS versteckt*/

Nun dazu, wie du die beiden CSS Files einbindest: Das onlyForJs.css muss nach deinem normalen CSS eingebunden werden und zwar auf folgende Weise (im Head Bereich der Seite):

<script type="text/javascript">
            //<![CDATA[
                document.write('<link type="text/css" rel="stylesheet" href="/scripting/onlyForJs.css" media="screen, projection" />');
            //]]></script>

Mit der Methode wird das CSS mittels JS eingebunden und nur User mit JS bekommen das modifizierte CSS.
Der Nachteil ist, dass ein File mehr geladen werden muss, jedoch ist das wohl vernachlässigbar, da die CSS Files gecached werden und in der onlyForJS.css meist nicht viel drinnen steht.

L. G.

 

[woffi]

AW: Geht diese jquery-Animation auch elegenater?

Super und Danke - eigentlich hätte ich da auch selbst drauf kommen können. Das weitere File ist bei der Summe absolut vernachlässigbar.
lg
woffi

 

[fexx]

AW: Geht diese jquery-Animation auch elegenater?

oder du nimmst einfach .hide(); in deine Kette mit auf....

<script type="text/javascript">
       $(document).ready(function() {
               $('#eins').hide().delay(1000).fadeIn(1500);
       });
</script>

 

[woffi]

AW: Geht diese jquery-Animation auch elegenater?

Das ist ja noch schöner - danke, habe ich gerade realisiert, funktioniert genauso, wie ich es haben möchte.

 

[Myhar]

AW: Geht diese jquery-Animation auch elegenater?

Es gibt hierfür wohl noch ein paar Varianten. Jedoch ist der Nachteil an oben genannter Version, dass das Element erst versteckt wird, sobald der DOM Baum komplett geladen ist. Das heißt, es kann zu einem flacker-Effekt kommen, bei dem das Element für 1sek sichtbar ist und dann erst versteckt wird.

Bei meiner Version wird das Element versteckt, sobald das CSS geholt wurde, welches sich ja bei mehrmaligem Aufruf schon im Cache befindet. Hier sollte sich das flackern auf ein minimum reduzieren lassen, bzw. gar nicht erst auftreten.
Auch kann man mit meiner Variante schneller mehrere Objekte verstecken, mit der von fexx angesprochenen JS Lösung müsste man jedes zu versteckende Objekt erst selektieren (was bei vielen Objekten natürlich dementsprechend lange dauert)

Welche Variante man schlussendlich einbaut, bleibt einem selber überlassen. Ich wollte hier nur noch einmal die Vor- Nachteile aufzeigen.

L. G.