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

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

已关闭 9 年前。

• 有关您所编写的代码问题的问题必须在问题本身中描述具体问题 - 并包含有效代码以重现该问题。请参阅SSCCE.org寻求指导。
• 要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果。另请参阅:Stack Overflow question checklist

Improve this 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 !