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)

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

谢谢!

Answer 1

由于您正在使用.css()和-webkit-transition:,因此您需要使用a 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秒(1000毫秒).如果要匹配.5秒数-webkit-transition:,则将其更改为500.

• .setTimeout()- 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;
    });
});