jquery延迟跟踪链接

我有一个简短的基于css的动画，我想在链接之后播放（一张在页面加载时突然进入的卡片在点击后突然弹出）。但是，当前调用的页面加载太快。我希望能够暂时延迟href的后续操作

以下是我得到的：

$(document).ready(function() {
    $("#card").css("top","0px");
    $(".clickit").click(function() {
        $("#card").css("top","-500");
    });
});

第一行在页面加载时将卡插入。之后是修改CSS的点击调用，但正如我所说，需要一些延迟，因为页面会立即加载，而不是在动画之后加载。修改的CSS如下所示：

#card {
  width: 400px;
  height: 500px;
  position: relative;
  top: -500px;
  -webkit-transition:all .5s;
}

（是的，我知道这只是现在的webkit）

这是一个与2008年非常相似的问题，但我知道jQuery从那时起已经进行了重大更新，所以我想看看是否有更现代的解决方案

谢谢大家!

这是一个与2008年的问题非常相似的问题，但我知道jQuery从那时起已经有了显著的更新，所以我想看看是否有更现代的解决方案

---

没有，答案还是一样。取消事件，然后自己稍后加载位置。

由于您正在使用

.css（）

和

-webkit转换：

，因此需要使用

setTimeout（）

延迟新位置

试试这个活生生的例子：

setTimeout（）

会将

窗口位置设置延迟1秒（1000毫秒）。如果要匹配
-webkit转换：
后的
.5
秒，请将其更改为500


.setTimeout（）
-
您可以在链接上使用preventDefault（），然后在动画完成后，使用jQuery的animate函数执行CSS转换

$('.clickit').click(function(e) {
    e.preventDefault();
    href = $(this).attr('href');
    $('#card').animate( { top: '-500px' }, 500, function() {
        window.location = href;
    });
});

你为什么要降低用户体验的速度？作为一个用户，这会很快变得恼人…理解并注意到。跟我开玩笑吧…@Nick-你没读过《光明旅冲锋队》吗？@patrick-是的，我相信这是高中必读的AP英语，还有整个背景故事。@Nick-那你的答案就来了；o） 谢谢。这是我试图改变的。。。但它不起作用。仍然只是立即加载href:$（“.clickit”）。单击（函数（ev）{ev.preventDefault（）；var$self=$（this）；$self.css（“top”，“-800”）；document.location=$self.attr（'href'）；}）；同意。您不需要设置超时，只需在动画完成后使用回调函数，谢谢您，Random citizen！
$('.clickit').click(function(e) {
    e.preventDefault();
    href = $(this).attr('href');
    $('#card').animate( { top: '-500px' }, 500, function() {
        window.location = href;
    });
});