Question

有没有办法在用户通过单击链接或单击后退/前进按钮导航离开页面之前执行jQuery动画。

似乎在响应卸载事件时执行动画肯定会涵盖用户可能离开页面的所有条件。

但是，在动画完成之前会加载新页面。我可以做一个忙碌的等待，但那不是很优雅。

或者，我可以拦截对锚点的点击。但这并不能说明后退/前进点击以及用户离开页面的其他条件。

是的，我理解这种行为是不受欢迎的，因为它让用户等待。但是，我试图在一个非常特殊的情况下这样做，我认为优点超过缺点。

Answer 1

用户使用他/她的浏览器切换网页的速度不在您的控制范围内，而只在您的页面中显示。

使用新的jQuery 1.3 live() event listener，您可以像建议的那样为所有锚点添加一个侦听器，即使是在声明侦听器之后创建的所有新锚点：

$("a").live("click", function(){
  var href = $(this).attr("href");

  var animDuration = 1000;

  // Do animation here; duration = animDuration.

  setTimeout(function () {
    window.location = href;
  }, animDuration);

  return false; // prevent user navigation away until animation's finished
});

Answer 2

该文件的onbeforeunload事件不适合大卫所要求的内容。

与正常事件（以及ajm所说的）相反，返回布尔值对此事件没有影响。返回false不会阻止导航，也不会阻止导致。

浏览器执行事件处理程序，因此在其中运行的任何同步代码实际上都可以延迟页面切换，但是不可能执行任何异步操作（例如jQuery动画），并且一旦执行就不会执行函数结束，页面被终止，下一页请求开始。

浏览器使用的此事件处理程序的唯一返回值是一个字符串，该字符串显示为确认消息的一部分，询问用户是否更喜欢说或离开。没有办法强迫任何一种选择。

另见MDN documentation on window.onbeforeunload。 Firefox 4 +中存在一个错误。

从实现中抽象回实际目标：在页面加载之间显示动画。在互联网上可能有大量单独的SO问题和教程的几种可能性：

使用AJAX加载内容

每当单击内部链接时，使加载程序图标可见，启动对另一页内容的AJAX请求。在显示旧内容的同时，最好继续显示顶部的微调器，然后显示一个只有微调器的空白页面。在ajax-callback中，在内容元素上做你喜欢的动画（例如jQuery slideUp（）），然后用新内容交换内容，隐藏微调器，然后做下一个奇特的动画（例如jQuery slideDown（））。
劫持锚标签并手动重定向

使用AJAX非常好看，但是如果你不想这样做，你也可以尝试解决onbeforeunload限制：不要延迟onbeforeunload，确保首先不触发事件。将委派事件绑定到页面上的所有anchortag并阻止默认（或返回false），导致浏览器不遵循链接。然后通过将window.location设置为点击的锚标记的href-attribute中的url来手动执行导航动画并在回调中进行导航。

Answer 3

您只需要为Document的onbeforeunload事件订阅一个监听器，该事件在用户离开页面时触发。

onbeforeunload会阻止页面导航，直到您的代码返回一个布尔值（true表示导航，false表示恼人的阻止导航），因此您只需要动画代码在完成时最终引发布尔值。

根本不需要监控链接。

在页面卸载时完成jQuery动画

3 个答案: