jQuery - Добавить анимацию CSS3 в div с помощью jQuery

Question

У меня есть этот загрузчик, который я создал с помощью анимации 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').load(function() { 

    //Code to start animation here 
    }); 

Как вы можете видеть, #bar иметь CSS3 анимацию установлен на «2s». Я хочу изменить это число через jQuery. Как я могу это сделать?

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

непроверенная, но он должен работать