javascript - 在加载下一页之前如何使用 jQuery 制作动画？

Question

我想添加一个动画，该动画将在用户单击链接时运行，但在链接页面开始加载之前运行。每当我尝试此操作时，页面都会立即开始加载，并且动画仅在下一页加载之前完成大约一半。

如果我添加 return false到 JavaScript block 的末尾，下一页永远不会加载。我怎样才能做到这一点？

Answer 1

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

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

然后给那些<a>的点击事件添加动画元素。通过将用户发送到链接页面来结束动画。确保仅在动画完成后将用户发送到下一页，方法是将 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()在上面的 block 中，而不是这个答案中的前 3 行。 谢谢Ian !