Jquery animate.({opacity} 根本没有运行

Question

所以在我的代码中，我试图为 div 的不透明度设置动画，当这不起作用时，我选择了带有 chrome 的 img，但仍然没有运行动画，我查看了代码，但也许我错过了一些东西。

HTML 简化：

<div class="searchWrapper">
    <div class="row">
        <div class="col-xs-3 popsImage">
            <img src="img/airplane3.png">
        </div>
    </div>
    <script src="https://www.somesite.com/searchbox"></script>
</div>

脚本：

    <script type="text/javascript">
        console.log('starting anim');
        $(".body > div.searchWrapper > div.row > div > img").animate({
            opacity: 0.9
        }, 5000, function() {
            console.log('Animation complete.');
        });
    </script>

这是css：

body > div.searchWrapper > div.row > div > img{
    opacity:0;
}

所以控制台确实打印了“开始动画”，但动画没有到达回调，所以它不会在控制台中打印完成。

有人能发现问题吗，以前运行的脚本会是罪魁祸首吗？

Answer 1

您可以在加载图像时添加一个 css 类来代替 jQuery animate，并使用 css 来制作动画：

JS

$('element').addClass('animate-opacity');

CSS

.animate-opacity {
    transition: opacity 5s;
    opacity: .9;
}

Answer 2

您的选择器中有一个简单的错字，在body 之前放错了.，因此将.body 更改为body。还要将代码放入document ready handler 以等待页面加载。

$(document).ready(function() {
  console.log('starting anim');
  $("body > div.searchWrapper > div.row > div > img").animate({
  //-^------------ remove .
    opacity: 0.9
  }, 5000, function() {
    console.log('Animation complete.');
  });
});

body > div.searchWrapper > div.row > div > img {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="searchWrapper">
  <div class="row">
    <div class="col-xs-3 popsImage">
      <img src="img/airplane3.png">
    </div>
  </div>
  <script src="https://www.somesite.com/searchbox"></script>
</div>

Answer 3

body 是 html 标记，但您在代码中将其用作类。在 jQuery 代码中删除 . 之前，您的动画将起作用。

console.log('starting anim');
$("body > div.searchWrapper > div.row > div > img").animate({
   opacity: 0.9
}, 5000, function() {
    console.log('Animation complete.');
});

body > div.searchWrapper > div.row > div > img{
    opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="searchWrapper">
    <div class="row">
        <div class="col-xs-3 popsImage">
            <img src="img/airplane3.png">
        </div>
    </div>
    <script src="https://www.somesite.com/searchbox"></script>
</div>