jquery動畫黑色全部背景色

Question

我使用下面的代碼爲chage背景色添加動畫。但所有背景顏色都會在效果後變暗。

<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

我測試你的代碼，它的工作好，這裏是片段：

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

Answer 2

爲什麼這麼多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>