更改使用jQuery動畫

背景顏色，我有以下的html代碼：`更改使用jQuery動畫

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $("div").animate({ 
     backgroundColor: '#f5f5f5', 
    }); 
    }); 
}); 
</script> 
</head> 

<body> 
<button>Start Animation</button> 
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"> 
</div> 

</body> 
</html>`

不過，我不能因爲使用動畫提到chnage背景顏色。
請讓我知道什麼是錯的？

由於
Smitha

來源

2013-12-12 Smitha

對於支持背景顏色的變化需要包括任一jQuery的用戶界面或jQuery的色庫

From Docs

例如，寬度，高度，或向左可動畫，但背景顏色不能，除非使用jQuery.Color()插件

$(document).ready(function() { 
    $("button").click(function() { 
     $("div").animate({ 
      backgroundColor: 'red', 
     }); 
    }); 
});

演示：jQuery UI
演示：jQuery Color

所以加

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script>

來源

2013-12-12 10:24:18

我有同樣的問題，事實證明這是更有效的使用添加/刪除班，JS和添加CSS3轉換裏面他們有我的顏色過渡：

CSS 
.firstColor{ 
background-color: #000000; 
-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
-ms-transition: all 0.5s ease; 
transition: all 0.5s ease; 
} 

.secondColor{ 
background-color: #FFFFFF; 
-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
-ms-transition: all 0.5s ease; 
transition: all 0.5s ease; 
} 

JS 

if (your condition) { 
    $("#yourID").removeClass('secondColor').addClass('firstColor'); 
} 
else{ 
    $("#yourID").removeClass('firstColor').addClass('secondColor'); 
}

希望它有助於:)

來源

2014-10-16 09:01:26 Meira

問題是關於如何使用'animate'方法更改背景顏色。添加/刪除類是獲得相同結果的替代方法，但不是目標。 – inigomedina

謝謝，這對我有用。 –

這比.animate（）更好的解決方案，謝謝！ –

更改使用jQuery動畫

回答

相關問題