我有一个简短的基于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从那时起已经有了很大的更新,所以我想看看是否有更现代的解决方案.
谢谢！
解决方法
由于您使用的是.css()和-webkit-transition：,因此您需要使用setTimeout()来延迟新位置.
试试实例：http://jsfiddle.net/2WJH9/
$(document).ready(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：的0.5秒,则将其更改为500.
> .setTimeout() – http://www.w3schools.com/js/js_timing.asp
