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

, что приведет к чему-то подобному
альтернативный текст 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

Может быть, вам стоит взглянуть @ это

Answer 2

Такого рода это делает

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

Вот хороший учебник , который, по сути, делает то же самое, что вы пытаетесь сделать (автоматически тоже)

---

Редактировать: О, ваш снимок экрана как бы отбросил меняЯ думал, что вы хотите прокрутить несколько изображений, но теперь я вижу, что вы хотите прокрутить одно очень широкое изображение?

Я сделал демо , чтобы ответить на другой вопрос, но я обновил еготак что вы можете просто навести курсор на кнопки, чтобы оживить изображение.Я надеюсь, что это больше похоже на то, что вы хотели.