在转到 url 之前对整个菜单进行动画处理，使用 jquery

Question

我有一个距页面顶部约 200 像素的菜单。单击菜单中的 link 时，我希望菜单滑动到页面顶部，然后才继续到 URL.

我在这里使用了来自类似问题的建议，但我无法让它完美地工作。

这是 jsfiddle。 http://jsfiddle.net/tinat/b55k98dz/1/

问题是 jquery 没有从 link 获取 URL？注意：在 jsfiddle 中，所有 link 都是相同的，但实际上它们都是不同的，所以我不想在 jquery 代码中定义特定的 URL，我想要jquery 从 link 的 href 属性获取 URL 并将浏览器带到它，一旦包装器 div 的动画结束。

HTML:

<div id="alllinks"> 
 <a class="link" href="http://www.google.com" target="_blank">Click me 1</a>
 <a class="link" href="http://www.google.com" target="_blank">Click me 2</a>
 <a class="link" href="http://www.google.com" target="_blank">Click me 3</a>
 <a class="link" href="http://www.google.com" target="_blank">Click me 4</a>
</div>

jquery:

$('.link').on('click', function (e) {
    e.preventDefault();
    $('#alllinks').animate({
        top: '0px',
    }, 1000, function () {
        document.location.href = this.href;
    });
});

CSS:

#alllinks {
    position: absolute;
    top: 200px;
    left: 0;
    background-color: #c00;
    color: #000;
}
.link {
    display: block;
    width: 100px;
    height: 20px;
    float: left;
    margin-right: 5px;
}

感谢所有帮助！

Answer 1

在您的代码中试试这个（在 Fiddle 中似乎不起作用），

我们从单击的元素中获取 href，然后将其传递给 window.location.href 方法。

$('.link').on('click', function (e) {
    var link = $(this).attr('href');
    e.preventDefault();
    $('#alllinks').animate({
        top: '0px',
    }, 1000, function () {
        window.location.href = link;
    });
});