javascript - 水平スクロール左が正しく動作しない

Question

divボタンをクリックすると、指定された領域にスクロールしたいと思います。最初のクリックではすべて問題ありませんが、2 回目以降のクリックでは、スクロール アニメーションが機能しないか、大幅に遅れて機能します。これは私の jsfiddle です: http://jsfiddle.net/AliN11/7CgFp/3/

注：jsfiddeを開くときは、jsfiddleの結果セクションで少し水平スクロールしてください。

Answer 1

ウィンドウがスクロールするたびに、新しいクリック ハンドラーを追加しています。これはあなたが望むものではありません。クリック ハンドラを 1 回追加するだけで完了です。

$("#b1").click(function(){$("#main").animate({ scrollLeft:110 }, "fast");});
$("#b2").click(function(){$("#main").animate({ scrollLeft:210 }, "fast");});
$("#b3").click(function(){$("#main").animate({ scrollLeft:310 }, "fast");});
$("#b4").click(function(){$("#main").animate({ scrollLeft:410 }, "fast");});

http://jsfiddle.net/7CgFp/4/

Answer 2

次のように JavaScript を変更します。

 $(document).ready(function(){
        $("#b1").click(function(){$("#main").animate({ scrollLeft:110 }, "fast");});
        $("#b2").click(function(){$("#main").animate({ scrollLeft:210 }, "fast");});
        $("#b3").click(function(){$("#main").animate({ scrollLeft:310 }, "fast");});
        $("#b4").click(function(){$("#main").animate({ scrollLeft:410 }, "fast");});

    });