jquery - fadeIn 结合 css 不透明动画

Question

看看这个fiddle .我有一系列的 div，其中一些可能有 css 不透明度动画。如果我单击淡入按钮，在带有 css 不透明度动画的 div 中效果看起来很奇怪:它们不淡入，而是直接从给定的不透明度值开始。

是否可以让每个 div 从不透明度值设置为零开始淡入？

<div id="container">
  <div class="asd red"></div>
  <div class="asd orange"></div>
  <div class="asd green"></div>
  <div class="asd blue"></div>
  <div class="asd magenta"></div>
  <div class="asd yellow"></div>
  <div class="asd red"></div>
  <div class="asd orange"></div>
  <div class="asd green"></div>
  <div class="asd blue"></div>
  <div class="asd magenta"></div>
  <div class="asd yellow"></div>
  <div class="asd red"></div>
  <div class="asd orange"></div>
  <div class="asd green"></div>
  <div class="asd blue"></div>
  <div class="asd magenta"></div>
  <div class="asd yellow"></div>
</div>
<div>
  <input type="button" id="fade" value="fade" />
</div>

CSS 代码:

body {
  background:#404040;
}

.asd {
  float:left;
  display:block;
  width:50px;
  height:50px;
}

.red {
  background-color: red;
}
.orange {
  background-color: orange;
}
.green {
  background-color: green;
  animation:opacityChange 2s infinite;
    -webkit-animation:opacityChange 2s infinite; /* Safari and Chrome */
}
.blue {
  background-color: blue;
}
.magenta {
  background-color: magenta;
}
.yellow {
  background-color: yellow;
}

@keyframes opacityChange {
    0%      {opacity:1;}
    50%     {opacity:0.5;}
    100%    {opacity:1;}
}

@-webkit-keyframes opacityChange { /* Safari and Chrome */
    0%      {opacity:1;}
    50%     {opacity:0.5;}
    100%    {opacity:1;}
}

jQuery 代码:

$("#fade").click(function() {
  $(".asd").hide();
  $(".asd").fadeIn(1000);
});

Answer 1

你可以这样做

http://jsfiddle.net/4HvZk/2/

$("#fade").click(function() {
    $(".asd").hide().removeClass('ani').fadeIn(1000, function() {
        $('.green').addClass('ani');
    });
});

CSS

.green {
  background-color: green;
}
.ani {
  background-color: green;
  animation:opacityChange 2s infinite;
    -webkit-animation:opacityChange 2s infinite; /* Safari and Chrome */
}

将动画 css 与背景颜色分开，以便更好地控制