javascript - 如何设置动画在加载下一页之前完成的延迟？ [jQuery, Bootstrap ]

Question

jQuery:

        $(document).ready(function(){
        $('.menuElements').hover(
            function(){             
                $(this).addClass('animated bounce');
            },
            function(){
                $(this).removeClass('animated bounce');
        });

        //trying to create delay here
        $('.menuElements').click(
            function(){
                $(this).addClass('slideOutUp').delay(1000);
            }
        )
    });

html:

<div id='wrapper'>
    <div class='container-fluid col-xs-10 col-xs-offset-1 menuContainer'>
        <div class='row-fluid' style='height:100%'>
            <a href='#'>
            <div id='home' class='container col-xs-3 menuElements' style='background-color: #C22326'>
                <img class='myIcons center-block vertical-align' src='images/home.png'>
            </div>
            </a>
            <a href='#'>
            <div id='projects' class='container col-xs-3 menuElements' style='background-color: #F37338'>
                <img class='myIcons center-block vertical-align' src='images/projects.png'>
            </div>
            </a>
            <a href='#'>
            <div id='aboutMe' class='container col-xs-3 menuElements' style='background-color: #FDB632'>
                <img class='myIcons center-block vertical-align' src='images/aboutMe.png'>
            </div>
            </a>
            <a href='#'>
            <div id='contactMe' class='container col-xs-3 menuElements' style='background-color: #027878'>
                <img class='myIcons center-block vertical-align' src='images/contactMe.png'>
            </div>
            </a>
        </div>
    </div>
</div>

我的页面看起来像四列，当我单击一列时，它会向上滑动并加载下一页(我仍然需要配置 href)。 我想做的是让列在点击时向上滑动并在加载新页面之前完成动画。

我是 jQuery 的新手，正在尝试自学，所以如果您知道任何好的资源，除了 http://api.jquery.com/ ，我可以使用那会很棒!

谢谢你们。

Answer 1

您可以设置延迟。

要么设置一个delay in the animation本身:

$(".menuElements").addClass("slideOutUp").delay(HOW_LONG);

或者你可以 set a timeout在继续使用 JS 进行下一个操作之前:

setTimeout(function(){ $(".menuElements").addClass("slideOutUp") }, HOW_LONG);