javascript - 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

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

JS

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

CSS

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