0

Всем доброго времени суток! Такая проблемка - есть небольшой слайдер на странице, с двумя кнопками, при нажатии на которые галерея внутри 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;
});
3
  • 1
    Отключайте перед анимацией и включайте по завершении
    – teran
    20 ноя 2017 в 16:24
  • В том то и дело что не получается - это первое что я сделал. 20 ноя 2017 в 16:42
  • $(this).attr('disabled', true); $('#galleryCont').animate({"margin-left": (galleryMarg - itemSize - itemMarg) + 'px'},500); $(this).attr('disabled', false); 20 ноя 2017 в 16:42

1 ответ 1

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>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.