Question

我有以下要素：

瓦片： allTile hotTile mmyTile

节： allSec hotSec mmySec

我想做的例子：如果单击allTile，则将动画类和bounceOut添加到所有3个部分以对其进行动画处理。然后删除这些类并添加hide-me以隐藏它们。在他们全部隐藏之后，取消隐藏allSec（因为allTile是所选的磁贴），通过删除hide-me并通过添加动画和bounceIn类来反弹它。

问题我面临的问题：在第一个window.setTimeout之后，没有代码运行。但是，如果我把它放在控制台中，它可以正常工作。但是，如果我在控制台中发布整个函数，那么它也不会在该window.setTimeout之后运行代码。

http://www.jsfiddle.net/met920/zt9eD 还应该有来自daneden.github.io/animate.css的Animate.css的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);

            }
        );
    };
}

Answer 1

我已经弄明白了。问题是setTimeout之后的代码发生在超时结束之前，因为我添加和删除了东西，hide-me标签被删除了＃34;在添加之前，将标签保留在最后。

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);
            }
        );
    };
}

Answer 2

尝试这项工作：

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);

            }
        );
    };
}

窗口后的jQuery代码.setTimeout不工作

2 个答案: