how to change div background-color with fadeIn/Out?

Question

How to change div background-color with fadeIn/Out,I only want to fade background color,not background image,Please give me some useful code or solution

Do you want to animate the background color? Look here: http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor — David Müller, Nov 14 '12 at 02:18

score 1 · Answer 1 · answered Nov 14 '12 at 06:02

Although only supported by modern browsers you might also consider using CSS transitions to achieve the same effect

HTML

<div class='foobar'></div>

CSS

.foobar {
    /* transition properties */
    transition: background-color 2s;
    -moz-transition: background-color 2s;
    -webkit-transition: background-color 2s;
    -o-transition: background-color 2s;

    /* basic styling & initial background-color */
    background-color:maroon;
    width:100px;
    height:100px;
}

/* Change background color on mouse over */
.foobar:hover {
    background-color:blue;
}

Working example here, http://jsfiddle.net/eRW57/14/

score 1 · Answer 2 · answered Jan 15 '18 at 12:14

1

with this you can fadeout all div's with id #my-background

var $div = $('#my-background');
  $div.each(function blank(){
  $(this).animate({'backgroundColor': '#fff'},2000);
});

answered Jan 15 '18 at 12:14

Matias Latorraca

11
1

This worked for me, but this works as fade in, how to do fade out for the same thing. – Ananthu K Kumar Mar 01 '23 at 10:34
(continuing from the previous comment) I mean it fades in and disappears all of a sudden, can we reverse the effect, i.e appears all of a sudden and then fades out. – Ananthu K Kumar Mar 01 '23 at 10:45

Matthew · Answer 3 · 2012-11-14T03:14:22.860

You can't fade just the background (color or otherwise) of an element using jQuery's fadeIn/fadeOut.

What you can do is place an additional layer (DIV, etc) with your background color and fade in/out on that.

Instead of something like this:

<div id="my-background"></div>

Use this structure:

<div id="container">
  <div id="my-background"></div>
</div>

CSS

#container
{
 position:relative;
 width:200px;
 height:100px;
 background-image:url(my-background-image.jpg);
}
#my-background
{
 height:100%;
 width:100%;
 background-color:blue;
 position:absolute;
 z-index:99;
}

Then use jQuery's fadeIn/fadeOut methods

JS

jQuery("#my-background").fadeOut();

score 0 · Answer 4 · answered Nov 14 '12 at 03:07

<script>
$(document).ready(function(){
  $("p").toggle(function(){
    $("body").css("background-color","green");},
    function(){
    $("body").css("background-color","red");},
    function(){
    $("body").css("background-color","yellow");}
  );
});
</script>

try it.. that should work fine

how to change div background-color with fadeIn/Out?

4 Answers4