Блокировка события на элементе при выполнении функции

Question

Я пытаюсь создать слайд-шоу с помощью jquery.Анимация для поворота следующего изображения занимает 1 секунду, а ползунок также имеет элементы управления next и prev.Можно ли заблокировать следующий и предыдущий элементы управления, чтобы они срабатывали во время анимации?

Answer 1

Используйте глобальную переменную (например, var animating = false), чтобы указать состояние анимации.

Установите ее на true, когда анимация начинается, и установите на false, когда анимация заканчивается (в обратном вызове).функция).

В функциях prev и next просто отметьте animating.Если это правда, ничего не делать, кроме возврата.

Answer 2

http://jsfiddle.net/R3aJS/ - рабочая скрипка, вы можете скрыть элементы управления, скрывая их, вызывая функции анимации для элементов изображения как и когда Я думаю, что мне было скучно, и я хотел бы расширить на Viclm ответ:)

  $("document").ready(function(){

        var direction=0;
        $("img").hide();
        $('.direction').click(function() {
            if ($(this).attr('id') == -1) {
                if (direction != 0) {
                    direction --;
                }
                runAnimation($("img:eq("+direction+")"));
            } else {
                if (direction == $("img").length-1) {
                    direction = 0; //go back to the start why not
                } else {
                    direction ++;            }
                runAnimation($("img:eq("+direction+")"));
            }    
        });

    });

    function runAnimation (something) {
        $('.direction').hide();
        $(something).toggle();
         $(something).animate({
            opacity: 0.25,
            left: '+=50',
            height: 'toggle'
          }, 2000, function() {
            $('.direction').show();
          });
    }

<div class="gallery">
    <img width="150px" height="150px" src="http://survivalgaming.co.uk/images/star1.jpg"/>
    <img width="150px" height="150px" src="http://images.pictureshunt.com/pics/s/star-2192.jpg"/>
    <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/commons/9/97/Esperanto_star.png"/>
</div>
<span class="direction" id="-1">Prev</span> <span class="direction" id="1">Next</span>

Answer 3

Не зная вашего кода, вот базовый подход:

Зарегистрируйте события для beginlide и endlide и установите переменную slideInProgress в true и false соответственно.Попросите ваш предыдущий и следующий элементы управления проверить, выполняется ли слайд, и запретите, если slideInProgress имеет значение true.