左侧水平滚动无法正常工作

Question

I would like when i click on button , the div scroll to specified area. for first click all things is ok.but for second click and more , the scroll animataion doesn't work or work with much delays ! This is my jsfiddle : http://jsfiddle.net/AliN11/7CgFp/3/

note: when opening jsfidde please scroll little horizontal scroll in result section of my jsfiddle.

Answer 1

You're appending a new click handler every time the window scrolls. This is not what you want. Just append the click handlers once and be done with it.

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

Change your javascript like this:

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

    });