jQuery - добавление CSS3-анимации в div с использованием jQuery.

Question

jQuery - добавление CSS3-анимации в div с использованием jQuery.

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. Как я могу это сделать?

oliverbj 18 сен. 2013, в 17:07

Источник

Теги:

jquery

html

css

css3

1 ответ

Ещё вопросы

Zach Saucier · Accepted Answer · 2013-09-18T14-26-00.000Z

Для чего? Нет смысла это делать.

В любом случае, вы ищете jQuery .css

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

Непроверенный, но он должен работать

Благодарю. Это работает. Ну, это имеет смысл сделать в моем скрипте, так как у меня есть загрузчик, созданный из css / css3, и я хотел бы использовать его, как я описал.
Да, но почему бы не изменить CSS напрямую? Этот подход действительно должен использоваться, только если пользователь вводит значение для него или что-то в этом роде