nicht angemeldet
Frage - jQuery Animation DIV bei Hover verschieben
Moin,
ich bin gänzlich unerfahren, was Javascript angeht, habe mir allerdings mittlerweile ein paar Kleinigkeiten angeeignet um eine Seite mit ein paar dezenten Animationen zu bereichern.
Ich schilder mal mein momentanes Problem:
Es liegen 2 DIV's übereinander, der untere besteht aus einem Hintergrundbild und weiterführendem Text. Der darüberliegende besteht aus einem Bild, dass grob durch eine Überschrift das Thema ankündigt. Nun soll der Interessent mit der Maus über das Bild fahren, der obere DIV verschiebt sich nach links und es kommt der weitere Text zum Vorschein. Dies ist alles ein Link und führt auf einer weitere Seite.
Was klappt, was nicht?!?
Soweit klappt alles, wie ich mir das vorgestellt habe, allerdings fängt der "animierte" DIV an zu stocken, wenn die Maus an der Kante vom einen zum anderen DIV ist. Vermutlich lässt sich das im Code beheben, allerdings weiß ich nicht wie. Ich hoffe es kann geholfen werden.
Hier der bisherige Code:
JS:
$(document).ready(function(){
var gassibox = $("#gassiover");
var gassiboxu = $("#gassi");
gassibox.hover(
function(){
$(this).stop().animate({"left": "-280px"}, "slow");
},
function() {
$(this).stop().animate({"left": "0"}, "slow");
});
gassiboxu.hover(
function(){
gassibox.stop().animate({"left": "-280px"}, "slow");
},
function() {
gassibox.stop().animate({"left": "0"}, "slow");
});
});
CSS:
div#gassi {width:280px;height:94px;top:48px;left:0;position:absolute;}
div#gassiover {width:280px;height:94px;background:url(Bilder/Unbenannt-1.jpg) 0 0 no-repeat;top:48px;left:0px;position:absolute;z-index:300;}
Viele Grüße
Alex
-
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.
-
Moin,
vielen Dank für deine Antwort. Ich hab schon versucht den Effekt nur auf den unteren DIV zu legen, aber anscheinend funktioniert das nicht, wenn darüber ein DIV liegt. Soweit verhält er sich ja auch so wie er soll, nur eben dieser Übergang zwischen dem Hover Befehl des einen und des Anderen DIV's ist nicht flüssig.
Hier mal ein Beispiel wie es jetzt aussieht:
-
Hallo,
Soweit verhält er sich ja auch so wie er soll, nur eben dieser Übergang zwischen dem Hover Befehl des einen und des Anderen DIV's ist nicht flüssig.
Ich hab das mal etwas erweitert - what do you think?.
Das Ruckeln entsteht, weil die jQuery-Animation so gebaut ist, dass sie "weich" ein - und ausfedert (sie bewegt sich erst langsam, dann schnell).
Durch den Wechsel des Hovers wird die Animation gestoppt, dann wieder langsam "angefahren". Das macht den störenden Effekt aus.
In meiner Lösung (die jetzt quick & dirty ist, bitte nur als Denkanstoss verstehen ;) ), wird jetzt eine Animation nur dann wieder neu gestartet, wenn sie nicht schon ohnehin läuft:
if (animationState != "hoverin") {...}Das allein würde aber noch nichts helfen, denn bei einem Übergang zwischen den Divs passiert ja direkt hintereinander ein Mouseout und Mouseover.
Die Animation würde also trotzdem gestoppt.Aus diesem Grund wird auf eine Benutzer-Aktion nicht sofort reagiert sondern erst nach ein paar Milisekunden (100 in meiner Lösung).
// Register that the user has done something, but do not // execute at once the desired action var registerAction = function (wantedState) { clearTimeout(timer); if (wantedState == "hoverin") { timer =setTimeout(hoverIn, 100); } else { timer = setTimeout(hoverOut, 100); } }Dadurch werden sehr schnell wechselnde events, die direkt hintereinander kommen, einfach "verschluckt".
Wie gesagt schön ist anders - aber vielleicht ein Anfang ;)
Viele Grüße,
Jörg-
Hey,
du bist ein Held. Läuft doch super. Ich versuch mich gerade noch an einer Alternative, tu mich allerdings relativ schwer, da ich wie gesagt, so gut wie keine Ahnung von JS habe und mich gerade erst so langsam mit der "Haudrauf-Methode" damit beschäftige.
Vielen Dank
Wenn ich meine Alternative vernünftig hin bekomme, dann poste ich die auch mal.
Viele Grüße
Alex
-
-
-
-
مرحبا
allerdings fängt der "animierte" DIV an zu stocken, wenn die Maus an der Kante vom einen zum anderen DIV ist.
Du könntest mit einer einfachen if-abfrage prüfen, ob die Box ganz rechts steht, oder noch unterwegs ist.
Wenn die Box die vorgeschriebene Position nicht erreicht hat, darf hover nicht zünden.mfg