jquery 延迟链接被跟踪

Question

我有一个基于 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)

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

谢谢!

Answer 1

由于您使用的是 .css() 和 -webkit-transition:，因此您需要使用 setTimeout()推迟新位置。

尝试一下现场示例: http://jsfiddle.net/2WJH9/

$(document).ready(function() {
    $("#card").css("top","0px");
    $(".clickit").click(function() {
        $("#card").css("top","-500px");  // Added px to make it work, 
                                         //   or get rid of quotes -500
        var href = $(this).attr('href');

             // Delay setting the location for one second
        setTimeout(function() {window.location = href}, 1000);
        return false;
    });
});​

setTimeout() 会将 window.location 的设置延迟 1 秒(1,000 毫秒)。如果您想匹配 -webkit-transition: 中的 .5 秒，请将其更改为 500。

• .setTimeout() - http://www.w3schools.com/js/js_timing.asp