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从那时起已经有了很大的更新，所以我想看看是否有更现代的解决方案。

谢谢！

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

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从那时起已经有了很大的更新，所以我想看看是否有更现代的解决方案。

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