JQuery остановить задержку скольжения, если кнопка нажата более одного раза

Question

Я знаю, что есть способ остановить цикл при каждом вызове анимации в jquery, но я не могу ее найти!

Как включить этот код ниже, чтобы он не зацикливался, если я нажимаю кнопку более чем на одну кнопку?

$('#message-box').slideDown('slow').delay(10000).slideUp('slow');

Если я нажму кнопку, которая вызывает этот вызов более одного раза, то он скользит вниз, отображается в течение 10 секунд, снова скользит вверх, а затем снова вниз.

То, что я хотел бы сделать, это если оно уже выключено, и я нажимаю кнопку, тогда НЕ , чтобы отобразить его снова. Или, если ничего другого, сдвиньте текущее сообщение вверх и сдвиньте вниз новое прямо там и без задержки между.

Любая помощь будет отличной!

David

Answer 1

Это позволит проверить, анимируется ли элемент сообщения перед запуском функции.

$('#btn').click(function () {
    if (!$('#message-box').is(':animated')) {
        $('#message-box').slideDown('slow').delay(10000).slideUp('slow')
    }
});
​

Answer 2

Вам нужно условие, чтобы предотвратить его активацию во время работы.Функция обратного вызова сбрасывает логическое значение, чтобы вы могли затем щелкнуть по нему снова, когда анимация будет завершена.

var animationRunning = false;

if(!animationRunning) {
    $('#message-box').slideDown('slow')
                     .delay(10000)
                     .slideUp('slow', function() { animationRunning = false; });

    animationRunning = true;
}

Answer 3

$('#message-box').slideDown('slow', function(){
$('#message-box').delay(10000).slideUp('slow');
})

Answer 4

Вы можете попробовать это:

$('#message-box').stop(true,true).slideDown('slow').delay(10000).slideUp('slow');

Если для элемента уже выполняется анимация с замедлением вверх, то .stop(true) остановит это, очистит очередь анимации элемента, и только тогдатребовать отсрочку.

Демо: http://jsfiddle.net/bSeE7/

Answer 5

проверить ".one"

http://api.jquery.com/one/

Answer 6

Самый простой метод, если вы хотите, чтобы событие происходило только один раз, - это один ()

http://api.jquery.com/one/

$('#myButton').one('click', function(){
    $('#message-box').slideDown('slow').delay(10000).slideUp('slow');
})

Answer 7

Использование .stop () - очевидный ответ, но при использовании с .slideUp () небольшая доля высоты все равно отображается при каждом вызове .stop ().Вы можете использовать .stop (true, true) , но это приведет к тому, что анимация слайда будет «переходить в конец», вызывая прерывистую анимацию.Не идеально.

Попробуйте использовать .animate() вместо .slideUp ()

Fiddle

$('button').click(function() {
    $('#message-box').stop(true).animate({height: 100}).delay(1000).animate({height: 0});
});