Animation mit jQuery klappt nur bedingt

[Fugel]

Hallo Leute,

ich habe eine kleine Animation mittels jQuery geschrieben, die nicht 100% richtig funktioniert. Es handelt sich dabei um drei Links (Bilder) die bei mouseenter zur seite raus fliegen sollen und eine Liste soll von der anderen Seite rein fliegen (es soll also immer nur ein Element gleichzeitig zu sehen sein). Das funktioniert soweit auch gut, nur wenn ich wärend die Animation noch läuft das nächste Bild berühre, dann werden von diesen auf einmal beide Elemente angezeigt. Wo liegt das mein Fehler? Anbei mal die koplette Animation zum besseren Verständnis: https://jsfiddle.net/6gvuxnse/1/

Hat einer ne Idee?

 

[dn3d_fanboy]

In deinem Fall macht es mehr Sinn, das Ganze direkt mit CSS zu lösen und ganz auf JS/jQuery zu verzichten.
Du kannst hier sehr gut mit den HTML5-Tag <figure> und <figcaption> arbeiten und diese dann per CSS mit :hover entsprechend animieren.

Zwei kleine Anregungen zu diesem Thema:
http://gudh.github.io/ihover/dist/
http://tympanus.net/Development/HoverEffectIdeas/

 

[dn3d_fanboy]

Hier mal was "auf die Schnelle":

https://jsfiddle.net/8qsdksxm/

 

[Fugel]

Guten morgen,

danke erstmal für deine Mühe. Die Technik die ihr mir vorschlagt ist mir durchaus bekannt, nur ist hier doch das Problem, dass es nicht alle Browser richtig darstellen können. Daher wollte ich es mittels Javascript machen.

 

[Myhar]

, nur ist hier doch das Problem, dass es nicht alle Browser richtig darstellen können.

Welche können das denn nicht?

 

[Fugel]

Welche können das denn nicht?

Na wie immer der IE8

 

[Myhar]

der IE8

Wie viel % deiner Besucher verwenden denn IE8? Und was ist so wichtig an der Animation dass diese Besucher nicht mit einer Version ohne Animation leben können?

 

[Fugel]

Wie viel % deiner Besucher verwenden denn IE8? Und was ist so wichtig an der Animation dass diese Besucher nicht mit einer Version ohne Animation leben können?

Leider sind es noch immer zu viele. Was die Animation angeht, so ist ja jeder bestrebt alles in jedem Browser gleich dar zu stellen. Aber überzeugt hast du mich dennoch, werde den IE8 zumindest bei der Sache in den Schrank stellen.

 

[Myhar]

so ist ja jeder bestrebt alles in jedem Browser gleich dar zu stellen.

Nein, das tut nicht jeder. Das war im letzten Jahrtausend wichtig und wird von Leuten, die noch nicht wirklich in diesem Jahrtausend angekommen sind, immer noch so gesehen. Aber das bringt keinen Mehrwert, eher weniger Wert wie in deinem Fall, wenn man Animationen mit JS umsetzt, was weniger gute Resultate als die CSS-Lösung erzeugt.

 

[Fugel]

Nein, das tut nicht jeder. Das war im letzten Jahrtausend wichtig und wird von Leuten, die noch nicht wirklich in diesem Jahrtausend angekommen sind, immer noch so gesehen. Aber das bringt keinen Mehrwert, eher weniger Wert wie in deinem Fall, wenn man Animationen mit JS umsetzt, was weniger gute Resultate als die CSS-Lösung erzeugt.

Naja ist eine Ansichtssache, der IE 8 ist nunmal erst 7 Jahre alt, ich denke das sollte zumindest eine Überlegung Wert sein für diesen zu entwickel. Muss allerdings zugeben, dass ich für < IE8 auch nichts mehr mach.

 

[Myhar]

Du hast meinen Standpunkt nicht, bzw. falsch verstanden: Auch ich entwickle noch für IE8, aber eben nicht dahingehend, dass es in jedem Browser gleich aussehen soll. Funktionieren muss es in jedem Browser (nahezu gleich), und da kann ein User, welcher Ie8 verwendet, auch auf Animationen verzichten, wenn der Rest ansonsten funktioniert.
"erst" in Zusammenhang mit dem Internet ist auch nett, dort ist 7 Jahre eine sehr lange Zeit

 

[Fugel]

So wie du es jetzt beschrieben hast, geb ich dir uneingeschrecnkt Recht. Was die 7 Jahre angeht, trifft das zwar auf das Internet zu, aber leider nicht auf den User der das Internet bedient