延迟点击链接直到动画结束答案

【问题标题】：Delay click on link till after animation延迟点击链接直到动画结束
【发布时间】：2015-07-25 23:56:23
【问题描述】：

我在让我的脚本正常工作时遇到问题。我正在使用Codyhouse 中的这段代码向我的页面添加导航。它的基本原理是，单击汉堡会打开它，然后当您单击链接时，它应该将页面滚动到该位置，同时关闭菜单。

这一切都很好，但是因为动画使用了变换：translateY(170px);，链接正在寻找它的位置，但是当它到达它时，页面已经移动了 170px，导致在它需要的位置下方 170px出现在屏幕上。

我的修复想法是延迟点击链接，直到动画完成，持续 0.5 秒，然后转到页面上的点。

这是我的脚本，

$('.nav-click').click(function (e) {
    e.preventDefault();                   
    var goTo = this.getAttribute("href"); 
    setTimeout(function(){
        window.location = goTo;
    },2000);       
});

我的脚本的结果是，当你点击链接时，它仍然滚动到页面上的位置，然后，在我当前设置的2秒后，它跳转到页面上的正确位置。

它应该等待 2 秒，然后跟随它的 href。

【问题讨论】：

尝试var goTo = this.href;获取绝对网址
感谢您的回复。问题不在于它没有正确的网址，而是没有发生延迟。但是我还是尝试了这个，但没有任何区别。
如果在超时发生之前没有设置 goTo 变量会怎样？我不知道它是否会有所帮助，但它可能会。
你遇到过这个答案吗 - stackoverflow.com/questions/17534661/…？以及来自 Ldn ON 小世界的问候！
感谢 Kepoly 的链接。无法让这些建议发挥作用。决定只从整个页面中删除转换，因为链接工作的实用性比一点效果更重要。

标签： javascript jquery html css animation

【解决方案1】：

尝试做这样的事情：

$('.nav-click').click(function(e) {
    e.preventDefault();
    var goTo = this.getAttribute('href');

    var interval = setInterval(function() {
        if (!$('main').hasClass('nav-is-visible')) {
            clearInterval(interval);
            window.location = goTo;
        }
    }, 100);
});

【讨论】：

这对我的脚本所做的结果没有影响。不过感谢您的回复。我决定一起删除转换，因为我宁愿链接工作，然后有一点效果工作。

【解决方案2】：

我没有找到解决此问题的方法，但选择一起从页面中删除转换，因为指向正确位置的链接对我来说比产生这种效果更重要。

【讨论】：