jQuery wave animation on row of icons

jQuery wave animation on row of icons

I have a row of icons on my page and i want to create a wave animation
effect when user hovers over them with the cursor.
I'm using this basic code for starters:
$('#icons > li')
.hover(function() {
$(this).animate({
'top': (-1 * hover_distance)
}, hover_speed);
}, function() {
$(this).animate({
'top': 0
}, hover_speed);
})
;
And it looks OK. But there is one issue: when you move your cursor
frantically over the icons, the animation queue for every icon is becoming
filled with lots of actions (up, down, up, down, up, down, etc) and icons
is going up and down lots of times even if you stop to interact with the
icons.
I want my icons to complete only one cycle (up and down) and then stop the
animation. I'm looking for a most elegant (short, simple, light) solution
for this.
P/S: And you can't just use stop() because it will prevent the "wave
effect" (i.e. when you move your cursor with one fast stroke over the
icons and they move up and down in response, like a real wave).