使用 jQuery 淡化背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19441806/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fade in background color using jQuery?
提问by user2865400
I would like to take a div and have the background fade to white on mouseenter and fade back out to black on mouseout. Any ideas on how to do this in jQuery?
我想拿一个 div 并让背景在 mouseenter 上淡化为白色，并在 mouseout 上淡出为黑色。关于如何在 jQuery 中执行此操作的任何想法？
回答by Sobin Augustine
with JQuery .hover()
使用 JQuery .hover()
$("div" ).hover(
function() {
$(this).animate({backgroundColor: "#fff"}, 'slow');
}, function() {
$(this).animate({backgroundColor:"#000"},'slow');
});
with JQuery .mouseover()
使用 JQuery .mouseover()
$("div")
.mouseover(function() {
$(this).animate({backgroundColor: "#fff"}, 'slow');
})
.mouseout(function() {
$(this).animate({backgroundColor:"#000"},'slow');
});
Noteyou have to use jquery-color (for animating colors). https://github.com/jquery/jquery-color/
请注意，您必须使用 jquery-color （用于动画颜色）。https://github.com/jquery/jquery-color/
回答by Arun P Johny
You need to use either jQuery UI libararyor jQuery Colorsto enable animation of colors
您需要使用jQuery UI 库或jQuery Colors来启用颜色动画
$('div').hover(function () {
$(this).stop(true, true).animate({
backgroundColor: 'black'
})
}, function () {
$(this).stop(true, true).animate({
backgroundColor: 'white'
})
})
Demo: Fiddle
演示：小提琴
回答by gordon
OP requested jQuery. For those trying to free-hand without jQuery:
OP 请求 jQuery。对于那些试图在没有 jQuery 的情况下自由发挥的人：
<div id="x" style="background-color:rgb(255,255,105)">hello world</div>
<script type="text/javascript">
var unBlue=100;
var gEvent=setInterval("toWhite();", 100);
function toWhite(){
if(unBlue<255) document.getElementById("x").style.backgroundColor="rgb(255,255,"+unBlue+")";
else clearInterval(gEvent);
unBlue+=10;
}
</script>
