I have an image which I want to move around slightly, like a boat on water, when the cursor is over. I have used Effect.Move to create this with an effect queue. Here is the code.

Javascript
function FloatIt(element){
new Effect.Move(element, { x: 10, y: -10, mode: 'relative', duration: 2.2, queue: { position: 'end', scope: 'fscope' } });
new Effect.Move(element, { x: -20, y: 5, mode: 'relative', duration: 2.2, queue: { position: 'end', scope: 'fscope' } });
new Effect.Move(element, { x: 5, y: -15, mode: 'relative', duration: 2.2, queue: { position: 'end', scope: 'fscope' } });
new Effect.Move(element, { x: -5, y: 20, mode: 'relative', duration: 2.2, queue: { position: 'end', scope: 'fscope' } });
}

function StopFloatIt(element){
var queue = Effect.Queues.get('fscope');
queue.each(function(effect) { effect.cancel(); });
}


HTML

<span id="floater"><a href="#" onmouseover="FloatIt('floater');" onmouseout="StopFloatIt('portfolio');">Float me!</a></span>

My questions are these:

1) I have only been able to Stop the floating where it is, so when I mouseout, it does not return to its original location. Can I somehow save the original location and have it float back there?

2) Is there another way so that only the span floats, and the link itself stays? I tried moving it outside of the span, but then it did not function when rolling over the link. PS, the span is a block element in the CSS, and I want the link to activate the floating, not the image itself.

3) Is there any other way to simulate this effect? I know other frameworks are out there, but I'll take suggestions or ideas?

Thanks!

Alright I came up with something that works, but isn't exactly what I'd like. I have decided that I can live with the image not floating back to its original position. I have isolated the image from the text by doing this.

#portfolio-cloud {
background-image: url("../images/portfolio_bg.png");
background-repeat: no-repeat;
width: 124px;
height: 35px;
display: block;
text-align: center;
padding-top: 35px;
}

#portfolio {
position: relative;
top: -37px;
padding-left: 28px;
}


<span id="portfolio-cloud"></span><a href="#" id="portfolio" onmouseover="FloatCloud('portfolio-cloud');" onmouseout="StopFloatCloud('portfolio-cloud');">portfolio</a>

EDIT:

Persistence is the key!

Solved by this code. Basically I added 'afterFinish' to the last queue item to loop the animation. Also, I found that by clearing the queue on mouseout and by using one last Effect.Move with 0,0,'absolute' returns it to its original location.

function floatCloud(element){
new Effect.Move(element, { x: 6, y: -3, mode: 'relative', duration: 1.0, queue: { position: 'end', scope: element } });
new Effect.Move(element, { x: -4, y: 5, mode: 'relative', duration: 1.0, queue: { position: 'end', scope: element } });
new Effect.Move(element, { x: 5, y: 2, mode: 'relative', duration: 1.0, queue: { position: 'end', scope: element } });
new Effect.Move(element, { x: -7, y: -4, mode: 'relative', duration: 1.0, queue: { position: 'end', scope: element }, afterFinish: function() { floatCloud(element); } });
}

function stopFloatCloud(element){
var queue = Effect.Queues.get(element);
queue.each(function(effect) { effect.cancel(); });
new Effect.Move(element, { x: 0, y: 0, mode: 'absolute', duration: 1.0 });
}