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