0

我有一个带有 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>

任何想法将不胜感激,谢谢。

4

2 回答 2

2

你最有可能想要:http ://api.jqueryui.com/switchClass/

switchClass动画所有类的变化。它是 jQuery UI 的一部分。

于 2013-11-12T17:52:06.223 回答
1

您正在尝试在伪元素上使用 addClass()

$(#CurrentTierProgressOuterTop > span:after)

这不会起作用,因为伪元素不是 DOM 的一部分。尝试更改目标元素。

于 2013-11-12T17:55:20.313 回答