Question

点击任何菜单链接后，我想在当前页面上播放一个快速动画，然后转到点击链接的网址。

我将非常感谢您提供专业的帮助！

Answer 1

阻止默认行为，播放动画，然后将浏览器指向原始目的地。

$('#menu a').click(function(event) {
    event.preventDefault();
    var href = this.href;

    $('#whatever').animate({
        top: '300px'
    }, 500,
    function() {
        window.location = href;
    });
});

Answer 2

多谢你们两位，这个例子给了我很多帮助！

我想知道如何扩展这个，让我说我想要#whatever将300px移到顶部并在那之后 - 不透明度：0;

所以基本上我想知道在执行href之前如何制作动画序列。

我尝试使用超时，但它不起作用。有了这个，我只能一次“解雇”。

编辑：

好的，我自己想出来了。我不确定它为什么会起作用（主要是因为我有限的javascript知识），但确实如此，这是脚本：

$('#menu a').click(function(event) {
    event.preventDefault();
    var href = this.href;

    $('#whatever').animate({
        height: '500px'
      }, 700);
    $('#whatever').animate({
        width: '500px'
      }, 1000);
    $('#whatever').animate({
        opacity: '0'
      }, 1200,
    function() {
        window.location = href;
    });
});

看起来超时并非必要，这些动画会按顺序显示。

如果我理解正确，那个脚本就是这样的：

定义链接不具有默认值
发生了什么事
在发生的事情的最后一部分，链接收到它的回复默认值

EDIT2：好的，让我们把它变得更复杂一些。假设我想要动画两个元素但不能同时动画。现在这看起来像一个超时的情况，然后再次因为这些函数正在按顺序发生，我可以通过动画来假设超时。例如，我添加了200px宽的#block，起初我将它的宽度设置为... 200px的动画，所以没有任何事情发生，这正是我想要的。但应该有一个正确的方法来做到这一点，任何人都可以对此有所了解吗？为什么这些动画会在序列中发生？如何设置超时（延迟动画）的正确方法是什么？

$('#menu a').click(function(event) {
    event.preventDefault();
    var href = this.href;

    $('#whatever').animate({
        height: '500px'
      }, 700);
    $('#block').animate({
        width: '200px'
      }, 1000);
    $('#block').animate({
        width: '500px'
      }, 1200);
    $('#whatever').animate({
        width: '500px'
      }, 1000);
    $('#whatever').animate({
        opacity: '0'
      }, 1200,
    function() {
        window.location = href;
    });
});

jQuery：点击任何菜单链接，播放动画，然后转到链接的URL

2 个答案: