在网站上导航时，如何在浏览器跳转页面之前使动画完全完成

【问题标题】：When navigating on a site, how can i make animations complete fully before browser jumps pages在网站上导航时，如何在浏览器跳转页面之前使动画完全完成
【发布时间】：2013-05-14 18:12:36
【问题描述】：

我想在我的网页中的导航菜单上使用 animate.css。例如，菜单飞出屏幕导航。主要问题是：如何延迟我单击的页面加载，直到动画完全完成。现在动画被切断，因为下一页加载。

    $(document).ready(function(){
    $('#list').click(function(){
        $(this).addClass('animated shake');
        window.setTimeout( function(){
        $('#list').removeClass('animated shake');
        }, 1000);
    });
});

【问题讨论】：

标签： navigation pageload animate.css

【解决方案1】：

在 jQuery > 1.6 中有 promise() 。你可以排队请求进一步等待promise()。

$("button").on( "click", function() {
  $("p").append( "Started...");

  $("div").each(function( i ) {
    $( this ).fadeIn().fadeOut( 1000 * (i+1) );
  });

  $( "div" ).promise().done(function() {
    $( "p" ).append( " Finished! " );
  });
});

http://api.jquery.com/promise/

【讨论】：

很抱歉，我太缺乏经验了，无法理解如何将它用于我的代码/问题。问题是，我有一个 ID 为“list”的无序列表，其中包含链接，我希望它在我单击链接时进行动画处理，但由于正在加载新页面，动画被切断。我真的不明白我必须如何使用 promise()。