Временно заблокировать кнопку

254

21 ноября 2017, 22:46

Всем доброго времени суток! Такая проблемка - есть небольшой слайдер на странице, с двумя кнопками, при нажатии на которые галерея внутри div-a смещается на определенное количество пикселей с заданным свойством animate - 500. Как можно реализовать блокировку кнопок на эти самые 500 миллисекунд, чтобы пользователь не имел возможности нажимать их до окончания cмещения? Пробовал играться и с delay() и с флагами. Безуспешно. Последняя реализация:

$('#button2').click(function(){
    if (flag == false){
        flag = true;
        ++count;
        var galleryMarg = parseInt( $('#galleryCont').css('margin-left'), 10);
        if(count <= itemSum-4){
            $('#galleryCont').animate({"margin-left": (galleryMarg - itemSize - itemMarg) + 'px'},500);
        }else{
            --count;
        }
    }
    flag = false;
});

Answer 1

У animate можно установить коллбек, который вызовется при завершении анимации. Все, что Вам нужно, это заблокировать кнопку перед началом анимации и разблокировать в этом коллбеке

$('#button2').click(function() { 
  var galleryMarg = parseInt($('#galleryCont').css('margin-left'), 10); 
  var btn = $(this).prop({disabled: true}); 
  $('#galleryCont').animate( 
    {"margin-left": (galleryMarg - 20) + 'px'}, 
    { 
      duration: 500, 
      complete: function() { 
        btn.prop({disabled: false}); 
      } 
    } 
  ); 
});

#galleryCont { 
  border: 1px solid blue; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="galleryCont">Gallery</div> 
<button id="button2">Animate</button>