jquery - 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"/>

这将导致这样的事情_{（来源：aximili at home.exetel.com.au）}

当#rightArrow 悬停时，如何使#wideImage 平滑地向左滚动？

我追求这样的事情

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

提前致谢！

Answer 1

也许你应该看看@这个

Answer 2

这是一个很好的教程，它基本上做你想做的事情（也自动）

---

编辑：哦，你的屏幕截图有点让我失望，我以为你想滚动浏览多张图片，但现在我看到你想平移一张非常宽的图片？

我制作了一个演示来回答另一个问题，但我对其进行了更新，因此您只需将鼠标悬停在按钮上即可为图像设置动画。我希望这更像你想要的。

Answer 3

这种做法

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