Question

这就是我想要实现的目标：

点击HTML链接后，我想在离开页面之前对其进行动画处理
如果在新窗口/选项卡中打开链接，则不应进行动画

我到底如何实现这一目标？

Answer 1

你可以使用javascript

$(function(){
  $(".btn").bind("click",function(){
    $(this).animate({'left': '100px'}, 100, function(){
    window.location.href = index.html
  })
 })
})

但如果您的按钮是链接，则必须停止默认操作。

Answer 2

您需要捕获click事件，阻止默认操作，执行动画，然后加载新页面。

如果使用jquery（可用作a jsfiddle）：

$('a').click(function (event) {
  event.preventDefault();
  $(this).animate({
    //whatever
  }, function() {
    location.href = $(this).attr("href");
  });
});

更新：Here's the new jsfiddle，说明评论中提到的情况，去那里查看更新的代码。诀窍是查找ctrl或command的按键，如果按下任一键，则中止新定义的动画点击处理程序。

注意：在jsfiddle中，窗口需要关注才能检测到按键，这意味着框架在它工作之前需要对焦。

如何在离开页面之前为点击的链接设置动画？

2 个答案: