Frage - jQuery Animation DIV bei Hover verschieben

[Kilomoana]

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