Правильное использование остановки и задержки

Question

У меня есть некоторые проблемы с моим кодом js. Я хочу анимировать простую функцию щелчка, так что div, показывает div внизу, но оживляет назад после 5 секунд. Я думаю, что я получил правильную настройку с fadeToggle и задержкой, но я просто не понимаю, как настроить «чрезмерное нажатие». Я имею в виду, когда люди путаются с объектом click.

Моя первая попытка была stop(true,true). Хотя кажется, что он работает как ожидалось (прерывая дальнейшее выполнение функции), к сожалению, он показывает базовый div через 5 секунд, хотя он должен показывать верхний (рисунок).

Вот это JS и скрипка:

$(function() { 
    $("#boxes li").on("click", function(){  
    $(this).find(".front,.back").stop(true, true).fadeToggle(800).delay(5000).fadeToggle(800); 
    }); 
}); 

но и JS скрипки ссылка, чтобы увидеть, что я имею в виду:

http://jsfiddle.net/sfiddle/bqbPL/

С уважением,

PS: попробуйте первый щелкнуть один раз, чтобы узнать, какой эффект я хочу выполнить, а затем нажмите 2 раза, чтобы увидеть, как через 5 секунд отобразится текстовый div.

Answer 1

Я изменил его немного,

, но все еще требуют некоторой работы на нем, вы можете использовать некоторые переменные флаг с щелчком,

Пожалуйста, смотрите обновленный 'fiddle`, он управляет процессом, но сохраняет следующий щелчок, который появляется после его исчезновения.

Update: чтобы избежать двойного щелчка

Создание флага, вы будете создавать логическую переменную, которая будет истина/ложь. (Или INT переменной с 0 или 1),

Как:

var flg=true;

Теперь эта переменная называется флаг, флаг начинается с ложной/Истинного значения (согласно требованию), то мы изменим флаг после события (событие, которое мы хотим наблюдать, нажатие кнопки), как только произойдет событие, мы изменим флаг.

Во втором случае вы добавите флаг в состояние. if(condition == true && flag == true) {....}, поэтому, если флаг изменен на false после события/щелкните событие, если оно не повторится.

Я надеюсь, что это поможет ..