Jquery 动画黑色所有背景色

Question

我使用下面的代码通过 animate 改变背景颜色。但效果后所有背景颜色变暗。

<script src="js/jquery-1.11.3.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery.color-2.1.2.min.js"></script>

<script>
$('#span1').animate({backgroundColor:'green'},2000);// return black bg
$('#span2').animate({backgroundColor:'red'},2000);// return black bg
$('#span3').animate({backgroundColor:'orange'},2000);// return black bg
</script>

Answer 1

为什么褪色的 JavaScript 开销这么大？只需使用 css 转换就可以了：

$(function() {
    $("button").click(function() {
        $('#span1').css("background", "green");
        $('#span2').css("background", "red");
        $('#span3').css("background", "orange");
    });
});

span {
    width: 100px;
    height: 100px;
    margin-right: 5px;
    display: inline-block;
    background: #f0f;
    transition: background 2s;
}

button {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="span1"></span>
<span id="span2"></span>
<span id="span3"></span>

<button>start</button>

Answer 2

我测试了你的代码，它运行良好，下面是代码片段：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>

<div id="span1" style="height:100px; background-color:#ffffff;"></div>
<div id="span2" style="height:100px;background-color:#ffffff;"></div>
<div id="span3" style="height:100px;background-color:#ffffff;"></div>

<script>
  $('#span1').animate({backgroundColor:'green'},2000);
  $('#span2').animate({backgroundColor:'red'},2000);
  $('#span3').animate({backgroundColor:'#FFA500'},2000);
</script>

Jquery 动画黑色所有背景色

Jquery animate black all background color

jquery

jquery-animate