Почему заедает анимация?

367

24 ноября 2016, 09:48

Пытаюсь реализовать анимированый скролл блока от left: 0; до right: 0;.

Первый запуск (клик по left кнопке --> клик по right кнопке) отрабатывает нормально, а вот повторный (повторный клик по left кнопке) вызывает резкий скачок.

Что не так со скриптом?

$('.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>

Answer 1

Попробуйте вернуть css свойства к первоначальному варианту после выполнения второй анимации:

$('.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>