Отключить анимацию CSS3 С помощью jQuery?

У меня есть объект, который имеет анимацию при загрузке страницы:Отключить анимацию CSS3 С помощью jQuery?

.logo-mark { 
     -webkit-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); 
      -moz-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); 
      -ms-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); 
      animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); 
    }

В определенное время, я хочу JavaScript, чтобы включить определенную анимацию, которая происходит до бесконечности, пока не остановится JavaScript сказал анимации. Поэтому я просто создал другой класс с именем .logo-load, а в определенное время jQuery делает addClass и removeClass.

.logo-loading { 
      -webkit-animation: spin 4s infinite linear; 
       -moz-animation: spin 4s infinite linear; 
       -ms-animation: spin 4s infinite linear; 
       animation: spin 4s infinite linear; 
     }

Однако, когда JavaScript удаляет класс, объект просто продолжает вращаться, несмотря ни на что. Я могу здесь что-нибудь сделать?

источник

2012-02-19 John Shammas

Не забудьте будущее доказательство! IE10 и opera реализуют анимацию CSS, поэтому вы также можете указать -ms и -o префиксы, чтобы каждый мог видеть, насколько удивительным является ваш сайт, когда они получают последние версии своих браузеров! –

Вы можете только переопределить, что свойства CSS с «нет» на все анимации

function stopAnimation(element) 
{ 
    $(element).css("-webkit-animation", "none"); 
    $(element).css("-moz-animation", "none"); 
    $(element).css("-ms-animation", "none"); 
    $(element).css("animation", "none"); 
}

так что вы можете остановить анимацию просто вызвать эту функцию ...

источник

2012-02-19 23:09:41

Вам не нужно использовать префиксы, jQuery добавит его для вас;) –

Это работает, как и следовало ожидать в Firefox см это jsFiddle:

http://jsfiddle.net/hNuSd/

Так я изменил свой пример (только сохранил -moz- них, как это Firefox) для 1s циклов, я начните вращение, а затем закончите его после 3.6 секунд. Все отлично работает, Firefox 11.0 на Xubuntu 11.10.

Если вы не используете Firefox, можете ли вы попробовать в Firefox подтвердить, что они (как ваши, так и мои примеры) работают там на вашей машине? Это может быть специфическая для браузера функция.

источник

2012-02-19 22:58:16

Если вы хотите, чтобы приостановить анимацию (и затем возобновить с того, что оно было приостановлено) вы можете переключить его состояние воспроизведения с этим CSS собственности:

.paused { 
    -ms-animation-play-state:paused; 
    -o-animation-play-state:paused; 
    -moz-animation-play-state:paused; 
    -webkit-animation-play-state:paused; 
    animation-play-state: paused; 
}

затем можно использовать JQuery для переключения приостановленное класс:

$("#animatedElement").click(function(e){ 
    $(e.currentTarget).toggleClass("paused"); 
});

Смотрите этот пример, который фактически делает паузу без JavaScript: http://jsfiddle.net/fRzwS/

И этот пост на Forrst от автора скрипки в: http://forrst.com/posts/How_To_Pause_CSS_Animations-0p7

источник

2012-02-20 04:16:39

Отключить анимацию CSS3 С помощью jQuery?

ответ

Смежные вопросы