Smi*_*tha 1 jquery css3 background-color jquery-animate
我有以下HTML代码:`
<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>`
但我无法使用动画提到的背景颜色.
请告诉我有什么问题？
谢谢
Smitha
要支持背景颜色更改,您需要包含jQuery UI或jQuery颜色库
例如,除非使用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>
小智 6
我有同样的问题,事实证明使用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');
}
希望能帮助到你 :)