当前位置：文江博客话题详情

如何在离开页面之前对点击的链接进行动画处理？

发布于 2025-01-08 00:06:37 字数 123 浏览 0 评论 0原文

这是我想要实现的目标：

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我们只是彼此的过ke 2025-01-15 00:06:37

您可以使用 javascript

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

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

You could use javascript

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

But you'll have to stop the default action if your button is a link.

回复收藏 0 原文

痴意少年 2025-01-15 00:06:37

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

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

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

更新：这是新的 jsfiddle，它解释了评论中提到的情况，去那里获取更新后的代码。诀窍是查找 ctrl 或 command 的按键，并在按下任一键时中止新定义的动画单击处理程序。

注意：窗口需要获得焦点才能检测到按键，在 jsfiddle 中，这意味着框架需要获得焦点才能工作。

You'll need to capture the click event, prevent the default action, do the animation, then load the new page.

If using jquery (Available as a jsfiddle):

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

Update: Here's the new jsfiddle that accounts for the situation mentioned in the comments, go there for the updated code. The trick is to look for the keypress of ctrl or command, and abort the newly defined animated click handler if either key is pressed.

Note: The window needs focus before it can detect a keypress, in jsfiddle, that means the frame needs focus before it'll work.

回复收藏 0 原文

~没有更多了~