Question

考虑这个CSS属性：

.front{
transition: left 2s;
left : 0px;
}

和这个JQuery函数：

var delay = 5000;
setTimeout(function(){
$('.front').animate({left: '1300px'}, { duration: 500});
,delay}

现在持续时间为0.5秒。延迟设置为5秒。转换时间是2秒。

我已经做了很多尝试来弄清楚谁赢得了时间之战，但我做不到。

你能帮助我并告诉我脚本运行时到底发生了什么吗？

编辑：我在css类中添加了初始位置属性;忘了添加它。

Answer 1

你的剧本：

等待5秒
然后使用.front超过半秒

基于您向我们展示的内容，CSS并没有真正做任何事情。请注意，CSS转换与jQuery动画不同。

更新：

基于我的评论的一个例子：

.front{
    left: 500px
    transition: left 2s;
}

.front.animate {
    left: 0px;
}

var delay = 5000;
setTimeout(function(){
    $('.front').addClass('animate');
,delay}

小提琴：http://jsfiddle.net/9q8sL/1/

CSS计时的JavaScript时序

1 个答案: