CSS动画的JQuery addClass不工作

我试图通过添加一个类在div中设置img的动画，我做错了什么

谢谢

请看我的

代码：

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>

JS

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

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

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

编辑：

我有另一个脚本，它是页面加载器，它运行一个设置间隔的函数，也许这就是罪魁祸首？ 因为我在控制台

中启动动画

，但我没有从函数的回调中完成任何

动画。

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

---

您的CSS不够具体（请阅读更多信息）

改变

.animate-opacity {

到

---

您的

CSS动画不透明度不够具体，因此您有两个选择：

给予它更高的重要性：

.searchWrapper div>img.animate-opacity{

使用jQuery添加不透明度：

jQuery:
$（.searchWrapper div>img”）.css（'opacity'，'1'）.addClass（'animate-opacity'，function（）{…}）；

CSS:
.animate opacity{转换：不透明度8s；位置：相对；}

示例-

更新

addClass（）
没有回调函数，因此您将无法在本例中使用此函数。您需要使用
animate（）
：

$(".searchWrapper div > img").animate({opacity: 1}, 8000, function() {
  console.log('Animation complete.');
});

示例-
另外，您没有在小提琴中加载jQuery:）实际上，它不起作用，我猜这是因为另一个脚本。现在正在编辑问题。问题已经编辑，在我的IDE和chrome上，它甚至没有进入函数（并记录“动画完成”），它没有通过函数。Alex，谢谢，但这也不起作用。我甚至没有从console语句中获得“动画完成”。它根本没有通过函数。呃，小提琴工作正常。所以你一定没有正确地将它应用到代码中。你能猜一下为什么它没有通过乐趣吗一点都没有，但之后还会继续给别人吗？thanks@erezT-我很确定
addClass（）
没有回调，因此您无法像现在这样运行函数。如果您想这样做，您需要使用
animate（）
.excellent@Alex，请您修改我的函数，作为回答，并“我会投票表决”好吗？如果我们不能复制您的问题，这将是不可能解决的。
$(".searchWrapper div > img").animate({opacity: 1}, 8000, function() {
  console.log('Animation complete.');
});