I'm building the code below.
Everything works great, but there's one thing I can't figure out.
When the mouse leaves a button, it starts the function animateBackground, this takes 500ms. If I hover another button in that time, things get welll... flippy.
What should happen is that the previous animation is stopped at that point and the new animation starts from that position... if possible even with a littlebit of ease.

Can someone get me on track here?

Cheers,

Jaap

The Script

$(document).ready(function(){

function animateBackground(BackgroundDestination)
{
$("#numbers").animate({
marginLeft: BackgroundDestination,
}, 500);
}

var BackgroundStartPosition = "0px"

$("#home").hover(function(){
animateBackground("-0px");
});
$("#home").mouseout(function(){
animateBackground(BackgroundStartPosition);
});

$("#news").hover(function(){
animateBackground("-1400px");
});
$("#news").mouseout(function(){
animateBackground(BackgroundStartPosition);
});

$("#contact").hover(function(){
animateBackground("-2800px");
});
$("#contact").mouseout(function(){
animateBackground(BackgroundStartPosition);
});

});

The HTML

<div id="mask">
<div id="numbers">Home 1 2 3 4 News 5 6 7 8 Contact</div>
</div>

<div id="menu">
<a id="home" class="menu_item" href="#">Home</a>
<a id="news" class="menu_item" href="#">News</a>
<a id="contact" class="menu_item" href="#">Contact</a>
</div>

The CSS

#numbers {

background-color: #333;
padding: 50px;
font: 60px "Lucida Grande", Lucida, Verdana, sans-serif;
word-spacing: 200px;
color: #fff;
width: 6900px;
}

#mask {
width: 500px;
overflow: hidden;
border: 7px solid #ece;
}

#menu a{
display: block;
float: left;
margin-right: 10px;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
text-decoration: none;
background-color: #000;
padding: 3px;
color: #fff;
}

#menu a:hover {
text-decoration: underline;
}

#menu {
margin-top: 10px;
}

Two jquery features that will help you:

1. Effects/stop() (http://docs.jquery.com/Effects/stop) - Stops all the currently running animations on all the specified elements.

2. Events/hover() (http://docs.jquery.com/Events/hover) - Simulates hovering (moving the mouse on, and off, an object).


Add those two into your code and you get:


<script type="text/javascript">

function animateBackground(BackgroundDestination){
$("#numbers").stop().animate({marginLeft: BackgroundDestination}, 500);
}

var BackgroundStartPosition = "0px";

$(document).ready(function(){

$("#home").hover(
function(event){animateBackground("-0px")},
function(event){animateBackground(BackgroundStartPosition)}
);

$("#news").hover(
function(event){animateBackground("-1400px")},
function(event){animateBackground(BackgroundStartPosition)}
);

$("#contact").hover(
function(event){animateBackground("-2800px")},
function(event){animateBackground(BackgroundStartPosition)}
);

});
</script>


HTH :)

Very smooth! This was what I was looking for!

Thanks for your help!