Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Auftauchendes Bild animieren

Empfohlene Antworten

Veröffentlicht

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!

  • Autor
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...

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

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.