jQuery的移动和加速到未知的距离（平滑滚动）

Question

想象一下这样的代码（简化）

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

，这将导致这样的事情
alt text http://home.exetel.com.au/aximili/tmp/stackoverflow-sample-scroll.jpg

你怎么一个方向使#wideImage在#rightArrow悬停时向左滚动？

我事先像这样

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

谢谢了！

Answer 1

这种做它

$('#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

也许你应该给看看@this

Answer 3

这里是nice tutorial基本上做你正在尝试做同样的事情（自动太）

---

编辑：哦，你的屏幕截图样的把我扔了，我以为你想滚动多个图像，但现在我看到你想跨越一个非常广泛的图像？

我制作了a demo来回答另一个问题，但我更新了它，以便您可以将鼠标悬停在按钮上以动画化图像。我希望这更像你想要的。