JQuery addClass с анимацией

Question

У меня есть прогресс бар с WebKit анимации:

   -webkit-animation: move 2s linear infinite !important; 

Я ищу, чтобы иметь возможность начать анимацию, добавив его в классе.

.doit { 
       -webkit-animation: move 2s linear infinite !important; 
} 

Это JQuery Я пытаюсь использовать:

$('#CurrentTierProgressOuterTop > span:after, .animate > span > span').addClass('doit'); 

CSS-:

#CurrentTierProgressOuterTop > span:after, .animate > span > span { 

      background-image: 
      -webkit-gradient(linear, 0 0, 100% 100%, 
       color-stop(.25, rgba(255, 255, 255, .2)), 
       color-stop(.25, transparent), color-stop(.5, transparent), 
       color-stop(.5, rgba(255, 255, 255, .2)), 
       color-stop(.75, rgba(255, 255, 255, .2)), 
       color-stop(.75, transparent), to(transparent) 
      ); 
     background-image: 
      -moz-linear-gradient(
       -45deg, 
       rgba(255, 255, 255, .2) 25%, 
       transparent 25%, 
       transparent 50%, 
       rgba(255, 255, 255, .2) 50%, 
       rgba(255, 255, 255, .2) 75%, 
       transparent 75%, 
       transparent 
      ); 
     content: ""; 
     position: absolute; 
     top: 0; left: 0; bottom: 0; right: 0; 
     z-index: 1; 

     -webkit-background-size: 50px 50px; 
     -moz-background-size: 50px 50px; 
      -webkit-border-top-right-radius: 8px; 
     -webkit-border-bottom-right-radius: 8px; 
       -moz-border-radius-topright: 8px; 
      -moz-border-radius-bottomright: 8px; 
        border-top-right-radius: 8px; 
       border-bottom-right-radius: 8px; 
      -webkit-border-top-left-radius: 20px; 
      -webkit-border-bottom-left-radius: 20px; 
       -moz-border-radius-topleft: 20px; 
       -moz-border-radius-bottomleft: 20px; 
        border-top-left-radius: 20px; 
        border-bottom-left-radius: 20px; 
     overflow: hidden; 
} 

Размещение WebKit фрагмент в вышеприведенном CSS запускает анимацию отлично.

HTML-:

<div id = "CurrentTierProgressOuterTop" style="display: none;"> 
<div id = "CurrentTierProgressInnerTop" style ="width:0px;height:10px;float:left;background-color:white;font-size:0px;">&nbsp;</div> 
</div> 

Все мысли были бы весьма признателен, спасибо.

Answer 1

Вы, скорее всего хотите: http://api.jqueryui.com/switchClass/

switchClass одушевляет все изменения класса. Это часть пользовательского интерфейса jQuery.

Answer 2

Вы пытаетесь использовать addClass() на псевдо-элемента

$(#CurrentTierProgressOuterTop > span:after)

и что не будет работать, потому что псевдо-элементы не являются частью DOM. Попробуйте изменить целевой элемент.