I am trying to implement an animated scrolling block from left: 0; to right: 0; .

The first launch (click on the left button -> click on the right button) works fine, but repeated (second click on the left button) causes a sharp jump.

What is wrong with the script?

 $('.left').on('click', function(){ $('.scroll-box').animate({ right: '0px' }, 1500, "linear", function(){ $('.scroll-box').css({'left': 'auto'}); }); }); $('.right').on('click', function(){ $('.scroll-box').animate({ left: '0px' }, 1500, "linear", function(){ $('.scroll-box').css({'right': 'auto'}); }); }); 
 .scroll { max-width: 500px; width: 100%; overflow: hidden; position: relative; height: 300px; margin: 1rem auto; } .scroll-box { position: absolute; width: 1000px; } .ctrl { display: block; width: 50px; height: 50px; line-height: 50px; position: absolute; z-index: 3; top: 50%; margin-top: -20px; color: #fff; background: tomato; text-align: center; cursor: pointer; } .left { left: 0; } .right { right: 0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div class="scroll"> <div class="scroll-box"> <span class="ctrl left"> l </span> <div class="img-wrap"> <img src="http://themastercleanse.org/wp-content/uploads/mc-article-graphic-inserts-1000x250-mode-selection.jpg" alt=""> </div> <span class="ctrl right"> r </span> </div> </div>

    1 answer 1

    Try to return the css properties to the original version after the second animation:

     $('.left').on('click', function(){ $('.scroll-box').animate({ right: '0px' }, 1500, "linear", function(){ $('.scroll-box').css({'left': 'auto'}); }); }); $('.right').on('click', function(){ $('.scroll-box').animate({ left: '0px' }, 1500, "linear", function(){ $('.scroll-box').css({'right': '', 'left': ''}); }); }); 
     .scroll { max-width: 500px; width: 100%; overflow: hidden; position: relative; height: 300px; margin: 1rem auto; } .scroll-box { position: absolute; width: 1000px; } .ctrl { display: block; width: 50px; height: 50px; line-height: 50px; position: absolute; z-index: 3; top: 50%; margin-top: -20px; color: #fff; background: tomato; text-align: center; cursor: pointer; } .left { left: 0; } .right { right: 0; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div class="scroll"> <div class="scroll-box"> <span class="ctrl left"> l </span> <div class="img-wrap"> <img src="http://themastercleanse.org/wp-content/uploads/mc-article-graphic-inserts-1000x250-mode-selection.jpg" alt=""> </div> <span class="ctrl right"> r </span> </div> </div>

    • Great, thank you! - HamSter