@Yasuro

Как запретить повторный клик по элементу? Как дождаться завершение анимации?

Написал скрипт, суть которого заключается в том, что он отображает вопрос в виде таблицы с заголовком, затем отлавливает клик по элементу таблице (строке), передает атрибут выбранной строчки на последующую обработку, скрывает этот вопрос, а на его месте выводит следующий вопрос из списка и так до конца списка вопросов.
Вопросы я скрываю и затем отображаю новый с помощью jquery методами hide() и show() соответственно. У hide есть анимация (анимация для меня важна) n-секундная.
Проблема в том, что пока эта n-секундная анимация идет, никто не запрещает кликнуть еще много раз по таблице и сломать скрипт, т.к каждый клик отловится.
Как решить эту проблему? Как разрешить кликать по элементу только когда отобразиться новый вопрос.

Сейчас код выглядит так:

<div id="q1" class = "question">
	<h3 value='author'>твой любимый мультик?</h3>
	<table>		
		<tr><td value="1" >Аладин</td></tr>
		<tr><td value="2">Король и лев</td></tr>
		<tr><td value="3">Симпсоны</td></tr>			
	</table>
</div>


//issues предок вышеуказанного дива.
$('#issues table tr').mousedown(function (){
        var selector=this;
	var click=$('td:first-child',this).attr('value')//атрибут строчки выбранной.
        display(click)// функция которая скрывает вопрос и отображает следующий
}


Есть на мой взгляд несуразный вариант решения: объявить переменную, устанавливать ее в false при клике, а в колбеке hide() устанавливать в тру и проверять каждый раз в false она или в true. Но т.к я привык все разносить по отдельным классам, с наследованием и т.д. Как я считаю такой переменной не место в каком либо из классов)
  • Вопрос задан
  • 996 просмотров
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
Ну например, можно использовать селектор :animated, он получает элементы, которые находятся в процессе анимации, и воспользоваться методом is для блока.
Пример на jsfiddle
Сам код:
$('#close_button').click(function() {
	var $block = $('#block');
  // Если блок анимируется, не выполняем обработку события
	if($block.is(':animated')) {
  	return;
  }
  // Красим блок случайным цветом, чтобы продемонстрировать однократный вызов события
	$block.css('background-color', "#"+((1<<24)*Math.random()|0).toString(16));
  // Прячем блок
	$block.hide(5000);
})
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы