CSS 动画的 JQuery addClass 不起作用

Question

我试图通过添加一个类来为 div 内的 img 制作动画，我做错了什么？

谢谢。

请查看我的JSfiddle .

代码:

HTML

<div class="loader"></div>
<div class="searchWrapper">
  <div class="row">
    <div class="col-xs-3">
      <img src="http://images.hayneedle.com/mgen/master:AMD010.jpg?is=70,70,0xffffff">
    </div>
  </div>

CSS

    .searchWrapper div > img {
  opacity: 0;
  position: relative;
}

.animate-opacity {
  transition: opacity 8s;
  opacity: 1;
  position: relative;
}

JS

function init() {
  $(".searchWrapper div > img").addClass('animate-opacity', function() {
    console.log('Animation complete.');
  });
}
init();

EDIT:

我编写了另一个脚本，它是页面加载器，它正在运行一个设置的间隔函数，也许这就是罪魁祸首？ 因为我正在进入控制台启动动画，但我没有从函数的回调中获得任何动画完成。。

不幸的是，在 jsfiddle 上它工作得很好，但在我的电脑上却不行。 Jsfiddle

Answer 1

您的 CSS 不够具体(了解有关 CSS specificity 的更多信息)。

改变

.animate-opacity {

至

.searchWrapper div > img.animate-opacity {

Updated Fiddle