jQuery-使用jQuery将CSS3动画添加到div

我使用CSS3和CSS3动画创建了这个加载程序。不过，我想使用jQuery创建实际的加载函数（取决于我说的秒数）

例如，我想将其设置为ex.30秒，以将条加载到满

目前，我有：

        <div id="loader">
            <div id="bar"></div>
        </div>  
#bar {
    height: 20px;
    width: 0px;

    background: -webkit-linear-gradient(top, #4892D9, #1960BC);
    background: -moz-linear-gradient(top, #4892D9, #1960BC);
    background: -ms-linear-gradient(top, #4892D9, #1960BC);
    background: -o-linear-gradient(top, #4892D9, #1960BC);
    background: linear-gradient(top, #4892D9, #1960BC);

    -webkit-box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(63,137,205, 0.4);
    -moz-box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(63,137,205, 0.4);
    box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(63,137,205, 0.4);
    -webkit-animation: progress 30s linear forwards;
    -moz-animation: progress 2s linear forwards;
    -ms-animation: progress 2s linear forwards;
    animation: progress 2s linear forwards;
}

---

如您所见，#栏将css3动画设置为“2s”。我希望能够通过jQuery更改此号码。我该怎么做？

为什么？这样做毫无意义

不管怎样，您正在寻找jQuery的

---

未经测试，但应该可以使用

尝试使用jQuery（）.animate。animate一点也帮不上忙谢谢。这很有效。嗯，在我的脚本中这样做是有意义的，因为我有一个由css/css3组成的加载程序，我想像我描述的那样使用它。是的，但是为什么不直接更改css呢？只有当用户输入它的值或某种程度的值时，才应该使用这种方法

    $('#iframe').load(function() {

    //Code to start animation here
    });

var loadingTime = 30; // Whatever time you want
$('#iframe').load(function() {
  $('#bar').css({
    '-webkit-animation' : 'progress ' + loadingTime + 's linear forwards',
    '-moz-animation' : 'progress ' + loadingTime + 's linear forwards',
    '-ms-animation' : 'progress ' + loadingTime + 's linear forwards',
    'animation' : 'progress ' + loadingTime + 's linear forwards'
  });
});