В моем коде у меня есть div, который перемещается влево и вправо при нажатии кнопок. Однако, когда я нажимаю кнопку несколько раз, она перемещается в соответствии с количеством нажатий. Я хочу, чтобы это было сделано, чтобы предотвратить ввод каких-либо данных (или кнопку, которая будет нажата), пока после завершения анимации.
Я попытался использовать задержку, чтобы сохранить действия "очереди", но это просто отложило их на несколько секунд.
Вот мой код * в настоящее время, а также пример jsfiddle идеи: http://jsfiddle.net/Sjfuv/ (Да, они разные, пример не сделан сам)
jQuery(document).ready(function($) {
var clickState = 0;
var cssForState = [{
'margin-left': '0px'
},{
'margin-left': '-850px'
},{
'margin-left': '-1700px'
}];
var advanceToNextClickState = function() {
clickState++;
if (clickState >= cssForState.length)
clickState = 0;
};
var previousClickState = function() {
clickState--;
if (clickState < 0)
clickState= 2;
};
$('.RButton').click(function (e) {
console.log("Received click while clickState = " + clickState);
advanceToNextClickState();
$('.slideContain').delay(150).animate(cssForState[clickState]);
});
$('.LButton').click(function (e) {
console.log("Received click while clickState = " + clickState);
previousClickState();
$('.slideContain').delay(150).animate(cssForState[clickState]);
});
});
* S/O пользователю, который тоже помог мне в моем последнем вопросе, мне нравится, как это работает ^ _ ^
$('.RButton').click(function (e) {
console.log("Received click while clickState = " + clickState);
//makes your button unclickable
var $btn = $(this);
$btn.attr("disabled", true);
advanceToNextClickState();
$('.slideContain').delay(150).animate(cssForState[clickState], function(){
//when animation is over, make it clickable
$btn.attr("disabled", false);
});
});
Используйте метод bind и unbind для добавления вашей функции. перед анимацией отключите эту и после анимации, снова привяжите ее.
Оберните код внутри левой и правой кнопки мыши с помощью функции boolean.
передать функцию в функцию задержки, так что, когда анимация закончится
вы возвращаете значение boolean обратно в значение false.