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
    Commented 20 нояб. 2017 в 16:24
  • В том то и дело что не получается - это первое что я сделал. Commented 20 нояб. 2017 в 16:42
  • $(this).attr('disabled', true); $('#galleryCont').animate({"margin-left": (galleryMarg - itemSize - itemMarg) + 'px'},500); $(this).attr('disabled', false); Commented 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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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