如何在加载下一页之前使用jQuery进行动画处理？

Question

我想添加一个动画，该动画将在用户点击链接时运行，但在链接页面开始加载之前运行。每当我尝试这个时，页面就会立即开始加载，动画只会在下一页出现之前大约一半。

如果我将return false添加到javascript块的末尾，则下一页永远不会加载。我怎么能这样做？

Answer 1

答案是首先删除相应<a>元素的本机点击操作。所以：

 $('#mainNavigation a').on('click',function(){
    return false;
    });

然后为这些<a>元素的click事件添加动画。通过将用户发送到链接页面来结束动画。通过将window.location语句放在动画回调函数中，确保只在动画完成后将用户发送到下一页。

$('#mainNavigation a').click(function(){

    // get the link url
    loc = $(this).attr('href');

    // run the animation
    $('#logo').animate({width:'100%',height:121},800,function(){
        window.location = loc;
        });


    });

或者，在上面的块中使用event.preventDefault()而不是此答案中的前3行。 谢谢Ian！