更改使用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动画

回答

相关问题