使用jQuery淡入淡出的背景色？

Question

我想采取一个div，并在mouseenter上将背景淡化为白色，并在mouseout上淡出为黑色。任何想法如何在jQuery中做到这一点？

Answer 1

与jQuery .hover（）

$("div").hover(
    function() { 
    $(this).animate({backgroundColor: "#fff"}, 'slow'); 
    }, function() { 
    $(this).animate({backgroundColor:"#000"},'slow'); 
    }); 

与jQuery .mouseover（）

$("div") 
    .mouseover(function() { 
    $(this).animate({backgroundColor: "#fff"}, 'slow'); 
    }) 
    .mouseout(function() { 
    $(this).animate({backgroundColor:"#000"},'slow'); 
    }); 

注意你必须使用jQuery的颜色（动画颜色）。 https://github.com/jquery/jquery-color/

Answer 2

您需要为使用jQuery UI libarary或jQuery Colors，使颜色

$('div').hover(function() { 
    $(this).stop(true, true).animate({ 
     backgroundColor: 'black' 
    }) 
}, function() { 
    $(this).stop(true, true).animate({ 
     backgroundColor: 'white' 
    }) 
}) 

演示动画制作：Fiddle

Answer 3

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>