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

选择器中的简单拼写错误.在body之前错位.body，因此将body更改为$(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.'); }); });。还要将代码放在document ready handler中以等待页面加载。

＆＃13;

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

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 2

而不是jQuery动画，你可以在加载时为图像添加一个css类，并使用css作为动画：

JS

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

CSS

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

Answer 3

body是html标记，但您在代码中将其用作类。在jQuery代码中删除它之前的.，你的动画就可以了。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Jquery动画。（{opacity}根本没有运行

3 个答案: