Использование setTimeout для задержки анимации jQuery

Question

Я работаю над некоторыми переходами на изображении, когда пользователь нажимает кнопку, чтобы перейти к следующему изображению. Когда несколько изображений расположены очень близко друг к другу, все эти изображения переходят одновременно. Поэтому я проверяю ширину изображений и добавляю тонкие к массиву, а затем запускаю переход для каждого объекта в массиве. Я хотел создать небольшую задержку между анимацией каждого изображения в массиве, поэтому я пытаюсь запустить свой jQuery.animate по истечении 1 секунды.

Вот как я пытался заставить тайм-аут работать без успеха:

1

for (i=0; i < set.length; i++) {
    if (i != 0) {
        setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

2.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        function tempTransition() {
            set[i].transitionOut( $('#gallery'), 562 );
        }
        setTimeout(tempTransition, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

3.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        setTimeout('function() { set[i].transitionOut($("#gallery"), 562) }', 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

transitionOut ():

jQuery.fn.transitionOut = function(parent, height) {
    this.animate({
        height: '0',
        top: height + 'px'
    }, function() {
        $(this).remove();
    });
}

Я получил его на примере закрытия CMS. Но теперь я сталкиваюсь с новой проблемой. Переход происходит только со вторым изображением. Когда есть три изображения, оно переходит в анимационное изображение 1, задержка, анимационное изображение 2, анимационное изображение 3. Между 2 и 3 задержка отсутствует.

Вот новый код:

for (i=0; i < set.length; i++) {
    (function(i) {
        if (i != 0) {

            function tempTransition() {
                set[i].transitionOut( $('#gallery'), 562 );
            }
            setTimeout(tempTransition, 200);
        } else {
            set[i].transitionOut( $('#gallery'), 562 );
        }
    })(i);
}

Answer 1

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

Переменная i, на которую ссылается ваша функция обратного вызова setTimeout, - это то же самое (, потому что JavaScript имеет только область действия функции, а не область действия блока ), и В то время, когда эти функции выполняются асинхронно, цикл уже завершен , и переменная i будет содержать set.length - 1 для всех случаев, когда используется setTimeout.

Как обычно, попробуйте перехватить переменную i, используя другое замыкание:

for (var i=0; i < set.length; i++) {
  (function (i) {
    if (i != 0) {
        setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
  })(i);
}

Answer 2

jquery fadeOut http://docs.jquery.com/Effects/fadeOut позволяет вам создать функцию обратного вызова, которую можно запустить после завершения fadeOut. Так что, если вы хотите, вы можете связать затухания вместе, поэтому, когда один заканчивает, он вызывает следующий. Если это не то, что вы ищете, возможно, я неправильно понимаю ваш вопрос.

Кроме того, в примере 3, я думаю, вы хотите написать это так, а не передавать определение функции в setTimeout, поскольку это ничего не даст.

setTimeout('set[i].transitionOut($("#gallery"), 562)', 100);

Answer 3

Использование тайм-аута - хитрая вещь, когда дело доходит до временной анимации / эффекта.

Я не проверял ваш код, но просматривая его, я заметил, что вы используете setTimeout без чего-либо для их очистки.

Что происходит, когда пользователи запускают события во время «задержки»? Вы должны реализовать что-то, чтобы справиться и с этим.

Извините, у меня нет ответа для вас сейчас, возможно, когда у меня будет больше времени или кто-то придет с более элегантным решением.