0

我有这个使用 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;
}

加载 iFrame 后，我想启动进度条：

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

    //Code to start animation here
    });

如您所见，#bar 将 css3 动画设置为“2s”。我希望能够通过 jQuery 更改这个数字。我怎样才能做到这一点？

4

1 回答 1

1

出于什么目的？这样做没有任何意义。

无论如何，你正在寻找 jQuery 的.css

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'
  });
});

未经测试，但它应该工作

于 2013-09-18T15:48:32.923 回答