Код jQuery после window.setTimeout не работает

0

У меня есть следующие элементы:

Плитка: allTile hotTile mmyTile

Разделы: allSec hotSec mmySec

Пример того, что я хочу сделать: если щелкнуть allTile, добавьте классы анимированные и bounceOut ко всем 3 разделам, чтобы их оживить. Затем удалите эти классы и добавьте hide-me, чтобы скрыть их. После того, как все они будут скрыты, тогда unhide allSec (поскольку allTile был выбранным фрагментом), удалив hide-me и отскочив его, добавив классы анимированные и bounceIn.

Проблема, с которой я сталкиваюсь: после первого window.setTimeout никакого кода не выполняется. Однако, если я положил его на консоль, он отлично работает. Но если я размещаю всю функцию в консоли, снова она не запускает код после этого window.setTimeout.

http://www.jsfiddle.net/met920/zt9eD Также должна быть ссылка CSS для Animate.css из daneden.github.io/animate.css

Альтернативно, здесь соответствующий код:

function(){
    animationClick('#allTile');
    animationClick('#hotTile');
    animationClick('#mmyTile');

    function animationClick(element){
        clickedEl = $(element);
        element = $(element.substring(0,4) + 'Sec');
        clickedEl.click(
            function(){
                //bounce out everything
                $(allSec).addClass('animated bounceOut');
                $(hotSec).addClass('animated bounceOut');
                $(mmySec).addClass('animated bounceOut');

                //wait for animation to finish
                //before removing classes and hiding them
                window.setTimeout(function(){
                    $(allSec).removeClass('animated bounceOut');
                    $(hotSec).removeClass('animated bounceOut');
                    $(mmySec).removeClass('animated bounceOut');


                    $(allSec).addClass('hide-me');
                    $(hotSec).addClass('hide-me');
                    $(mmySec).addClass('hide-me');
                }, 2000);

                //bounce in the new one
                element.removeClass('hide-me');
                element.addClass('animated bounceIn');
                window.setTimeout(function(){
                    element.removeClass('animated bounceIn');
                }, 2000);

            }
        );
    };
}
  • 0
    также опубликуйте html, предоставьте jsfiddle
  • 0
    try $ ("element"). removeClass ("animated bounceIn"); в конце
Показать ещё 2 комментария
Теги:

2 ответа

1
Лучший ответ

Я понял это. Проблема в том, что код после setTimeout происходит до истечения этого таймаута, и поскольку я добавляю и удаляю вещи, тег hide-me был "удален" до его добавления, сохраняя там тег в конце.

function(){
    animationClick('#allTile');
    animationClick('#hotTile');
    animationClick('#mmyTile');

    function animationClick(element){
        clickedEl = $(element);
        element = $(element.substring(0,4) + 'Sec');
        clickedEl.click(
            function(){
                //bounce out everything
                $(allSec).addClass('animated bounceOut');
                $(hotSec).addClass('animated bounceOut');
                $(mmySec).addClass('animated bounceOut');

                //wait for animation to finish
                //before removing classes and hiding them
                setTimeout(function(){
                    $(allSec).removeClass('animated bounceOut');
                    $(hotSec).removeClass('animated bounceOut');
                    $(mmySec).removeClass('animated bounceOut');


                    $(allSec).addClass('hide-me');
                    $(hotSec).addClass('hide-me');
                    $(mmySec).addClass('hide-me');


                    element.removeClass('hide-me');
                    element.addClass('animated bounceIn');
                    setTimeout(function(){
                        element.removeClass('animated bounceIn');
                    }, 2000);
                }, 1000);
            }
        );
    };
}
0

попробуйте это:

function(){
    animationClick('#allTile');
    animationClick('#hotTile');
    animationClick('#mmyTile');

    function animationClick(element){
        clickedEl = $(element);
        element = $(element.substring(0,4) + 'Sec');
        clickedEl.click(
            function(){
                //bounce out everything
                $(allSec).addClass('animated bounceOut');
                $(hotSec).addClass('animated bounceOut');
                $(mmySec).addClass('animated bounceOut');

                //wait for animation to finish
                //before removing classes and hiding them
                setTimeout(function(){
                    $(allSec).removeClass('animated bounceOut');
                    $(hotSec).removeClass('animated bounceOut');
                    $(mmySec).removeClass('animated bounceOut');


                    $(allSec).addClass('hide-me');
                    $(hotSec).addClass('hide-me');
                    $(mmySec).addClass('hide-me');
                }, 2000);

                //bounce in the new one
                element.removeClass('hide-me');
                element.addClass('animated bounceIn');
                setTimeout(function(){
                    element.removeClass('animated bounceIn');
                }, 2000);

            }
        );
    };
}
  • 0
    Единственное изменение - удаление окна. из window.setTimeout, верно? Если так, то работает точно так же.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню