Fade in background color using jQuery?

问题:

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?

回答1:

with JQuery .hover()

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

with JQuery .mouseover()

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

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

回答2:

You need to use either jQuery UI libarary or jQuery Colors to enable animation of colors

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

Demo: Fiddle

回答3:

OP requested jQuery. For those trying to free-hand without jQuery:

hello world
  

文章来源: Fade in background color using jQuery?