[jQuery] Exécuter une fonction continue dans un hover()

Bonjour à tous,
Voilà je suis nouveau en programmation jQuery, et je rencontre un problème qui doit sans doute être simple à résoudre mais je bloque total.

Je possède le code suivant :

<div id="wrapper">
	<div id="content">
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
		<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
	</div>
</div>
<button type="button" class="up">Scroller vers le haut</button>

#wrapper {
    height: 300px;
    overflow: hidden;
    padding: 7px 0 15px;
    width:350px
}

En fait ma div #wrapper a des dimensions fixes, et elle est en overflow:hidden.
Ma div #content, elle est libre et donc elle prend la taille de son contenu.

J'aimerais qu'au survol sur le bouton .up, ma div #content puisse se déplacer vers le haut pour créer un mouvement de "scrolltop" du contenu.
Biensur dès que la souris ne survole plus le bouton le scroll doit se terminer, et la div #content doit garder la position dans laquelle elle est arrivée.

J'ai déjà réussi à faire ça en jQuery :

$('.up').hover(
	function(){
		$('#content').animate({
			top:'-366px'
		});
	}, function(){
		$('#content').stop();
	}
);

Le problème c'est que pour l'instant je n'arrive qu'à faire en sorte uniquement que ma div content se déplace vers le haut d'une valeure fixe (ici -366px).
Ce que j'aimerai faire en fait, c'est qu'au survol, ma div #content puisse se déplacer de -10px en -10px tant que je reste en "hover" sur le bouton.

Mais là je bloque, je ne sais pas du tout comment réaliser ça :s
Modifié par Miit (11 Jul 2012 - 07:20)