Question

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

感谢。

请参阅我的JSfiddle。

CODE：

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();

编辑：

我jave另一个脚本，它是页面加载器，它正在运行一个设置间隔函数，也许这是罪魁祸首？因为我进入我的控制台starting anim，但我不从函数的回调中获取任何Animation complete.。

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

Answer 1

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

更改

done()

要

.animate-opacity {

Updated Fiddle

Answer 2

.animate-opacity的CSS不够具体，所以您有两种选择：

更重要的是：

.searchWrapper div > img.animate-opacity {
使用jQuery添加不透明度：

jQuery：$(".searchWrapper div > img").css('opacity','1').addClass('animate-opacity', function(){...});

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

示例 - https://jsfiddle.net/0bv2h7nd/6/

<强>更新

addClass()没有回调功能，因此您无法在自己的情况下使用此功能。您需要使用animate()代替：

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

示例 - https://jsfiddle.net/0bv2h7nd/24/

用于CSS动画的JQuery addClass不起作用

2 个答案: