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）

这个问题与2008年的this question非常相似，但我知道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毫秒）。如果您想匹配.5的{{1}}秒，请将其更改为500。

-webkit-transition: - http://www.w3schools.com/js/js_timing.asp

Answer 2

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

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

Answer 3

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

不，仍然是同样的答案。取消活动，然后稍后自己加载该位置。

jquery延迟了一个链接

3 个答案: