“动画延迟”属性的.css()不能用变量设置

时间:2015-08-28 04:37:46

标签: jquery css animation delay

我无法使用变量来更改'animation-delay'css属性。

注意:这适用于背景颜色或其他动画属性。动画延迟也可以使用字符串'10s'而不是变量 - 即使变量显式设置为字符串。

var animationDelayTime = '10s'  
$('.my-animation-class').css({  
  'animation-delay' : animationDelayTime  
})

这另一种方法也不起作用:

$('.my-animation-class').css(  
  'animation-delay', animationDelayTime  
)

目前有效:

$('.my-animation-class').css({  
  'animation-delay' : '10s'  
})

jsfiddle

1 个答案:

答案 0 :(得分:2)

我创建了jsfiddle - 这对我有用。也许你在其他地方有问题?

<div class="my-animation-class"></div>

<强> JS

$(document).ready(function(){
    var animationDelayTime = '10s'  
    $('.my-animation-class').css({  
      'animation-delay' : animationDelayTime  
    });
});

<强> CSS

.my-animation-class{
    width:200px;
    height:200px;
    background:#ff0000;
     -webkit-animation: mymove 5s infinite; 
    -webkit-animation-delay: 2s; 
    animation: mymove 5s infinite;
    position:relative;
}


@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

http://jsfiddle.net/sthAngels/3bc30t9k/