Problem mit Gif Animation
0 0 0 
imho_tep
0 Dieter Raber
Problem mit Gif Animation
Hi, ich habe eine kleine Animation für mein Menü erstellt, bei der ein Pfeil von links nach rechts eingeblendet wird.
Mit CSS habe ich den Pfeil dann eingefügt:
#nav a:hover{
background:#FFF url("../images/arrow-2.gif");
background-repeat:no-repeat;
background-position:left center;
color:#a0000b;
}
Das funktioniert auch super. Nun habe ich jedoch ein Problem. Ich habe bei der Animation eingestellt, das sie nur einmal läuft. Der Pfeil soll ja nur einmal beim :hover reingefahren kommen.
Bei dem ersten mal funktioniert das auch super.
Wenn ich jedoch auf einen Menüpunkt klicke, die Pfeilanimation also einmal lief und dann nochmal auf einen Menüpunkt fahre, dann passiert gar nichts...
Meine Frage ist nun wie ich es hinbekomme, dass die Pfeilanimation jedes mal wenn man über einen Menüpunkt fährt einmal abspielt.
Ich hoffe sehr, das mir jemand helfen kann.
Vielen Dank
-
Es ist ne Weile her dass ich mich damit befasst habe, aber damals war es so dass der Browser, wenn man einen Link anklickt, alle animierten Gifs stoppte. Mindestens das Gif auf dass man klickt. Das stört auch nicht weiter, da ja normalerweise nach dem klick eine neue HTML-Seite geladen wird und dann ist es wieder in dem Zustand in dem animierte Gifs abgespielt werden.
Da es bei dir nicht so ist vermute ich dass die Seite, in der das Gif eingebunden ist, nicht neu geladen wurde. Benutzt Du Frames? Oder AJAX? Sonst wüsste ich nicht warum der Browser sich so verhällt.
Da es sich ja um einen hover-Effekt handelt: Wenn Du wiederholt über den Link fährst, ohne zu klicken, dann klappt es jedesmal?
Falls wir es nicht mit Frames oder AJAX zu tun haben:
Was auch sein kann...
Du schreibst wenn man über den Link fährt soll die Animation 1x laufen. Wenn man also weiter mit der Maus auf dem link bleibt soll sie sich nicht wieerholen. Sie läuft also 1x ab, das Gif ist so erstellt. Keine endlose Wiederholung, nur einmal.Wenn Du erneut drüber fährst ist sie also 1x gelaufen. So hast Du es ja eingestellt.
Aber wenn ich mich richtig erinnere beginnt er die Grafik beim hover-Effekt als neu "geladen" anzusehen und speitl sie jedesmal erneut ab, als wäre es das erste mal. Aber da bin ich mir gerade nicht sicher.
Wenn das so ist, dann hilft es vielleicht wenn Du das Gif Endlos ablaufen lässt, und beim letzten Frame eine Pause einbaust. Also das letzet Frame 1 Sekunde (oder 3) lang anzeigen lässt. Kein User verweilt 3 Sekunden mit der Maus auf einem Link, wenn doch ^^ sieht dieser ungewöhnliche User die Animation erneut.
Vielleicht klappt es ja so.
Hast Du schonmal getestet was passiert wenn Du ein endlos ablaufendes Gif verwendest, was dann passiert, nach dem Klick?
Gruß
-
Hi, ersteinmal vielen Dank, dass du mir diese ausführliche Antwort geschrieben hast.
Da es bei dir nicht so ist vermute ich dass die Seite, in der das Gif eingebunden ist, nicht neu geladen wurde. Benutzt Du Frames? Oder AJAX? Sonst wüsste ich nicht warum der Browser sich so verhällt.
Frames benutze ich nicht. AJAX "glaube" ich auch nicht. Ich bin mir aus dem Grund nicht ganz sicher, weil ich Typo3 verwende. Ich weiß nicht ob dieses AJAX verwendet.
Da es sich ja um einen hover-Effekt handelt: Wenn Du wiederholt über den Link fährst, ohne zu klicken, dann klappt es jedesmal?
Japp..
Wenn das so ist, dann hilft es vielleicht wenn Du das Gif Endlos ablaufen lässt, und beim letzten Frame eine Pause einbaust. Also das letzet Frame 1 Sekunde (oder 3) lang anzeigen lässt. Kein User verweilt 3 Sekunden mit der Maus auf einem Link, wenn doch ^^ sieht dieser ungewöhnliche User die Animation erneut.
Vielleicht klappt es ja so.
Gute Idee.. ich hatte sie nämlich auch schon^^. Leider klappt es nicht, weil die gif Animation jedes mal pausiert wird, und dann fortgesetzt wird, wenn man wieder auf einen Menüpunkt fährt.
Hast Du schonmal getestet was passiert wenn Du ein endlos ablaufendes Gif verwendest, was dann passiert, nach dem Klick?
Da funktioniert es dann.. jedoch mit endloser Schleife.
Ich bin für jede weitere hilfreiche Antwort dankbar :)
Schöne Grüße
-
Wenn das so ist, dann hilft es vielleicht wenn Du das Gif Endlos ablaufen lässt, und beim letzten Frame eine Pause einbaust. Also das letzet Frame 1 Sekunde (oder 3) lang anzeigen lässt. Kein User verweilt 3 Sekunden mit der Maus auf einem Link, wenn doch ^^ sieht dieser ungewöhnliche User die Animation erneut.
Vielleicht klappt es ja so.
Gute Idee.. ich hatte sie nämlich auch schon^^. Leider klappt es nicht, weil die gif Animation jedes mal pausiert wird, und dann fortgesetzt wird, wenn man wieder auf einen Menüpunkt fährt.
Hallo Lilly,
wenn Du im css vor dem a:hover noch ein a:link einfügst und dem eine
leere Grafik als Hintergrund gibst, geht die Animation jeweils wieder
von vorn los - jedenfalls im meinem FF2 und IE7.Best wishes, imho_tep
--
HAL 9000: Ich fürchte, wir haben ein Problem, Dave.
-
-
-
Hallo Lilly,
Meines Wissens liegt das beschriebene Phaenomen daran, dass die Grafik beim zweiten Durchgang bereits im Browsercache liegt.
Ich habe das nie probiert, aber man koennte folgendes versuchen (Ich unterstelle im Beispiel, sie Grafik soll bei hover ein Stueck nach rechts wandern):
Du nimmst anstatt der animierten Grafik eine statische. Diese positionierst du so, dass sie in ihrer Endposition ist. Mit Javascript setzt du sie onmouseout soweit nach links, dass sie nicht mehr sichtbar ist. Onmouseover aenderst du in einer Schleife die background-position solange, bis sie wieder in Endposition ist.
Ohne Javascript hat man dann zwar keine Animation, aber sonst funktioniert alles.Gruß,
Dieter