Я использую этот http://jsfiddle.net/CqAU2/ плагин для вращения изображения, но если вы нажмете на квадрат в скрипке несколько раз, он будет продолжать вращаться столько раз, сколько вы на него нажимали. То, что я хотел бы сделать, это принять действие click
во внимание только тогда, когда поле не перемещается. Как это можно сделать?
Вы можете установить флаг, который "блокирует" действие, если он все еще оживляет, и сбрасывает заблокированный флаг после того же времени, что и продолжительность анимации (в вашем случае 1000 мс):
$(document).ready(function () {
var degree = 0;
var locked = false;
$(".big-ball").click(function () {
if (!locked) {
degree += 30;
$(this).jqrotate(degree, 1000);
locked = true;
setTimeout(function(){
locked = false;
},1000);
}
});
});
Я обновил вашу скрипку
Это результат, который вы хотели?
Я добавил stop() перед вызовом анимации.
$(elem).stop().animate({...})
Что делает stop()?
Когда.stop() вызывается в элементе, текущая анимация (если она есть) немедленно останавливается.
Подробнее о остановке здесь: http://api.jquery.com/stop/
я обновляю ваш скрипт - я вставляю элемент управления для предотвращения двух или более щелчков
$.fn.jqrotate = function (degrees, speed) {
if(typeof $.preventTwo !== "undefined" && $.preventTwo == false) return;
$.preventTwo = false;
return this.each(function () {
var elem = this;
elem.x = $(elem).data('rot')||0;
$(elem).animate({
x: degrees
}, {
duration : speed,
step: function( now, fx ) {
$(fx.elem).css({
'-webkit-transform' : 'rotate('+now+'deg)',
'-moz-transform' : 'rotate('+now+'deg)',
'-ms-transform' : 'rotate('+now+'deg)',
'-o-transform' : 'rotate('+now+'deg)',
'transform' : 'rotate('+now+'deg)'
}).data('rot', now);
},
complete : function(){
$.preventTwo = true;
}
});
});
};
$(document).ready(function () {
var degree = 0;
$(".big-ball").click(function () {
degree += 30;
$(this).jqrotate(degree, 2000);
});
});
byee... http://jsfiddle.net/CqAU2/1/