jQuery延迟了链接的跟踪 [英] jquery delay a link from being followed

问题描述

我有一个简短的基于css的动画，我想在跟随链接之前播放(在页面加载后突然张开的卡，单击后会突然张开).但是，当前调用的页面加载速度太快.我希望能够短暂地延迟href的遵循.

I have a short css-based animation that I want to play out before a link is followed (a card that swooped in on page load swoops out after click). Currently, however, the page called loads too quickly. I want to be able to briefly delay the href from being followed.

这就是我所拥有的:

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

第一行将卡片加载到页面加载中.在那之后是修改CSS的点击调用，但是就像我说的那样，那里需要某种形式的延迟，因为页面是立即加载的，而不是在动画之后加载的.修改后的CSS如下所示:

The first line swoops the card in on page load. After that is the click call that modifies the CSS, but like I said there needs to be some kind of delay in there because the page loads immediately, instead of after the animation. The CSS that is modified looks like this:

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

(是的，我知道这是仅适用于Webkit的内容)

(yes, I know this is webkit-only right now)

这是一个非常类似于

This is a problem very similar to this question from 2008, but I know jQuery has been updated significantly since then, so I wanted to see if there was a more modern solution.

谢谢！

推荐答案

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

Since you're using .css() and -webkit-transition:, you'll need to use a setTimeout() to delay the new location.

尝试实时示例: 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.

The setTimeout() will delay the window.location from being set for 1 second (1,000 milliseconds). If you want to match the .5 seconds from -webkit-transition:, then change it to 500.

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

这篇关于jQuery延迟了链接的跟踪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！