Улучшение кода слайдера JQuery

Question

Я закодировал простой слайдер кнопки «Назад-Далее», используя JQuery. Следующая кнопка работает правильно, но когда мы нажимаем кнопку «Prev» быстро, умножаем число раз, чем оно. Не дожидаясь завершения анимации и начала показывать белый пространство ...

Скрипки: - https://jsfiddle.net/pnjcr6sw/

Код: -

Css

<style> 
    *{ margin:0; padding:0; box-sizing:border-box;} 
    .slider { width:320px; overflow:hidden; margin:50px 0 0 50px; max-width:100%;} 
    .slider ul { float:left;} 
    .slider li { float:left; list-style:none;} 
    .pager{ float:left; margin:5px;} 
    .pager span { width:15px; height:15px;background:#000; border-radius:50%; display:inline-block; margin:0 5px; cursor:pointer; color:#fff;} 
    .pager span.active { background-color:#f00;} 
</style> 

HTML

<div class="slider"> 
    <ul> 
     <li title="First"><img src="story1.jpg" alt=""></li> 
     <li title="Second"><img src="story2.jpg" alt=""></li> 
     <li title="Last"><img src="story3.jpg" alt=""></li> 
    </ul> 
    <a href="#" class="prev">prev</a> 
    <a href="#" class="next">next</a> 
</div> 

JS

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
<script> 
    $(document).ready(function() { 

     var slider_w = $('.slider').width(); 
     var total_li = $('.slider li').length 
     var total_w = $('.slider').width()*total_li 
     $('.slider ul').width(total_w); 
     // counter 

     // next button 
     $('a.next').click(function(){ 
      $('.slider ul').animate({marginLeft:'-' + slider_w }, function(){ 
       $('.slider li:first').appendTo('.slider ul'); 
       $('.slider ul').css('margin-left','0'); 
      }); 
     }); 

     //prev button 
     $('a.prev').click(function(){ 
      $('.slider li:last').prependTo('.slider ul') 
      $('.slider ul').css('margin-left','-=' + slider_w)  
      $('.slider ul').animate({marginLeft:'+=' + slider_w}) 
     }); 
    }); 
</script> 

Answer 1

Просто проверьте, если ваша анимация все еще работает.

if($('.slider ul').is(':animated')) { ... } 

А затем добавить return; остановить обработчик щелчка пред делать это дело.

$(document).ready(function() { 
 

 
var slider_w = $('.slider').width(); 
 
var total_li = $('.slider li').length 
 
var total_w = $('.slider').width()*total_li 
 
$('.slider ul').width(total_w); 
 
// counter 
 

 
// next button 
 
$('a.next').click(function(){ 
 
$('.slider ul').animate({marginLeft:'-' + slider_w }, function(){ 
 
\t $('.slider li:first').appendTo('.slider ul'); 
 
\t $('.slider ul').css('margin-left','0'); 
 
}); 
 
}); 
 

 
//prev button 
 
$('a.prev').click(function(){ 
 
    if($('.slider ul').is(':animated')) { 
 
     return; 
 
    } 
 
$('.slider li:last').prependTo('.slider ul') 
 
$('.slider ul').css('margin-left','-=' + slider_w) \t 
 
$('.slider ul').animate({marginLeft:'+=' + slider_w}) 
 
}); 
 

 
});

*{ margin:0; padding:0; box-sizing:border-box;} 
 
.slider { width:320px; overflow:hidden; margin:50px 0 0 50px; max-width:100%;} 
 
.slider ul { float:left;} 
 
.slider li { float:left; list-style:none;} 
 
.pager{ float:left; margin:5px;} 
 
.pager span { width:15px; height:15px;background:#000; border-radius:50%; display:inline-block; margin:0 5px; cursor:pointer; color:#fff;} 
 
.pager span.active { background-color:#f00;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="slider"> 
 
<ul> 
 
<li title="First"><img src="http://4.bp.blogspot.com/-8jO_wS_uLik/TdDQZh-4PrI/AAAAAAAAA6A/6pHEqZwFQdg/s320/Amazing+Building+Pictures+4.jpg" alt=""></li> 
 
<li title="Second"><img src="http://4.bp.blogspot.com/-8jO_wS_uLik/TdDQZh-4PrI/AAAAAAAAA6A/6pHEqZwFQdg/s320/Amazing+Building+Pictures+4.jpg" alt=""></li> 
 
<li title="Last"><img src="http://4.bp.blogspot.com/-8jO_wS_uLik/TdDQZh-4PrI/AAAAAAAAA6A/6pHEqZwFQdg/s320/Amazing+Building+Pictures+4.jpg" alt=""></li> 
 
</ul> 
 
<a href="#" class="prev">prev</a> 
 
<a href="#" class="next">next</a> 
 
</div>

Answer 2

Вы можете попробовать использовать if ($(elem).not(':animated')) { // more animation }. Ознакомьтесь с документацией для получения дополнительной информации: (http://api.jquery.com/animated-selector/)