mrjerk: Frage - jQuery Animation DIV bei Hover verschieben

Beitrag lesen

Hallo,

Vermutlich lässt sich das im Code beheben, allerdings weiß ich nicht wie. Ich hoffe es kann geholfen werden.

Es ist schwierig, sich das vorzustellen, so ohne Demo-Seite, ich versuch aber trotzdem zumindest mal eine Analyse:

Am Anfang liegen Deine Bilder beide auf Position 0 (von links gesehen).

Du fährst mit der Maus über das oben liegende DIV, dieses fängt an sich nach links zu schieben, weil es die Hover-In Animation ausführt:

  
function(){$(this).stop().animate({"left": "-280px"}, "slow");}  

Soweit wolltest Du das ja auch.

Irgendwann rutscht das oben liegende Div an der Maus vorbei (oder Du bewegst sie auf den Rand) Was macht das Div? Es führt die Hover-Out-Animation aus, sprich es bewegt sich nach rechts:

  
$(this).stop().animate({"left": "0"}, "slow");  

Heureka! Das obere Div ist zurück, und die Maus über ihm. Also Hover-In, Bewegung nach links:

  
function(){$(this).stop().animate({"left": "-280px"}, "slow");}  

Oh...Jetzt wieder nicht mehr, Bewegung nach rechts:

  
$(this).stop().animate({"left": "0"}, "slow");  

Halt...jetzt wieder nach links...nach rechts...nach links...nach rechts....

Das dürfte das Stocken erklären.

Wie Du das Problem nun lösen willst, hängt davon ab, wie sich das Div in diesem Grenzfall verhalten soll.

Du könntest z.b. das untere Div ebenfalls mit der Animation verknüpfen, die das obere Div weiterschiebt. Die Frage ist ob das das Verhalten ist, was Du willst, denn dann würde auch ein Mouseover auf das untere Div das obere wegschieben.

Falls Du das nicht willst, könntest Du die "untere Animation" so bauen, dass sie nur dann ausgeführt wird, wenn die "obere" schon angestossen wurde.

Oder...

=> Ein Patentrezept ist schwierig. Im Zweifelsfall muss man ein bisschen rumprobieren und sich anschauen, welchees Verhalten einem gefällt.

Hoffe, mein Post war trotzdem für einen Denkanstoss gut.