Zum Inhalt springen

Auftauchendes Bild animieren


Empfohlene Beiträge

Hallo zusammen,

ich hoffe, ihr könnt mir bei folgender Sache helfen:

Ich habe (von einem anderen Forum, da ich keine Ahnung von JS habe) folgenden Code erhalten, um ein Bild automatisch nach x Sekunden anzeigen zu lassen:

head Bereich

<script type="text/javascript">

    function showIt() {

      document.getElementById("hid").style.display = "block";

    }

    </script>



HTML-Code:

<body onLoad='setTimeout("showIt()", 10000);'>

10000 = 10 Sekunden
div für dein Bildcode Code:
<div id="hid" style="display:none;">

hier den Bildcode einfügen

</div>

Das funktioniert auch wunderbar, allerdings würde ich jetzt noch gerne das Bild etwas animiert erscheinen lassen. D.h. es soll langsam von unten nach oben auftauchen.

Bin für jede Hilfe dankbar!

Link zu diesem Kommentar
Auf anderen Seiten teilen

Ich werfe einfach mal jQuery ein. Vielleicht findest du dort was.

Mit jQuery kann ich leider genauso "viel" anfangen wie mit JavaScript selbst :)

Ich habe zwar ein paar Codes zu animierten Bildern gefunden, nur schaffe ich es leider nicht, diesen Coden in den vorhandenen zu integrieren...

Link zu diesem Kommentar
Auf anderen Seiten teilen

Den Header um folgenden Schnipsel erweitern um jQuery verfügbar zu haben:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Und dann
document.getElementById("hid").style.display = "block";
mit z.B. einer der folgenden Zeilen ersetzen:
$('#hid').slideDown() //In die Klammer kannst du die Dauer der Animation in Millisekunden (oder zig anderer Sachen) festlegen, default ist 400

$('#hid').fadeIn()

Das sollte als Anhaltspunkt helfen, jQuery ist aber wirklich gut dokumentiert. Sollte also ein einfaches sein sich da etwas zu belesen. Effects | jQuery API Documentation

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...