mouvement jQuery et d'accélérer à une direction pour la distance inconnue (défilement lisse)

Question

Imaginer ce code (simplifié)

<img id="leftArrow"/> 
<div style="overflow:hidden; width:300px"> 
    <img id="wideImage" style="width:1000px; position:absolute; left:0"/> 
</div> 
<img id="rightArrow"/> 

qui se traduira par quelque chose comme ça
alt text http://home.exetel.com.au/aximili/tmp/stackoverflow-sample-scroll.jpg

Comment comptez-vous faire #wideImage défilez doucement vers la gauche lorsque #rightArrow est survolé?

Je suis après quelque chose comme ça

$('#right').hover(function() { 
    //On hover, accelerate #wideImage to the left 
}, function() { 
    //On mouse out, decelerate to stop 
}); 

Merci à l'avance!

Answer 1

Cela ne sorte de ce

$('#right').hover(function() { 
    $('#wideImage').animate({ left: '-=50' }, 250, 'easeInQuad', function() { 
    $('#wideImage').animate({ left: '-=600' }, 250, 'linear', function() { 
     $('#wideImage').animate({ left: '-=50' }, 250, 'easeOutQuad'); 
    }); 
    }); 
}, function() { 
    $('#wideImage').stop(); 
    $('#wideImage').animate({ left: '-=50' }, 250, 'easeOutQuad'); 
}); 

Answer 2

Peut-être que vous devriez donner un coup d'oeil @this

Answer 3

Voici nice tutorial qui fait essentiellement la même chose que vous essayez de faire (automatiquement aussi)

---

Edit: Oh, votre copie d'écran type de m'a déconcerté, je pensais que vous vouliez faire défiler plusieurs images, mais maintenant je vois que vous voulez faire un panoramique sur un très large?

J'ai fait a demo pour répondre à une autre question, mais je l'ai mise à jour afin que vous puissiez simplement passer la souris sur les boutons pour animer l'image. J'espère que cela ressemble plus à ce que tu voulais.