Fade in background using jQuery?

Question

I would like to take a div and link the background to white on the mouseenter and fade to black on the mouse. Any ideas on how to do this in jQuery?

Answer 1

with jquery.hover ()

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

using jquery.mouseover ()

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

Note you need to use jquery-color (for animating colors). https://github.com/jquery/jquery-color/

Answer 2

You need to use jQuery UI libarary or jQuery Colors to enable color animation

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

Demo: 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>