How to Fade out background-color of a div

Question

I'm trying to make a div background color to fadeOut slow

html

<div class="bg">...........</div>

I used this jquery

$('.bg').css('backgroundColor','#dedede');
setTimeout(function(){
    $('.bg').css('backgroundColor','#ffffff'); 
}, 1000);

How to add the fadeOut effect?

Tushar · Accepted Answer · 2015-06-17T10:30:25.233

3

You can use fadeOut: $('.bg').css('backgroundColor', '#dedede');

$('.bg').fadeOut(1000);

Demo

OR

You can animate:

$('.bg').animate({
    'opacity': '0'
}, 1000);

Demo

UPDATE

$('.bg').css('backgroundColor', '#dedede');
$('.bg').animate({
    'opacity': '0.5'
}, 1000, function () {
    $('.bg').css({
        'backgroundColor': '#fff',
        'opacity': '1'
    });
});

Demo

edited Jun 17 '15 at 10:30

answered Jun 17 '15 at 10:23

Tushar

85,780
21
159
179

But the problem, this fadeOut effect hide all the div element, not just the background color !! – Devstar Jun 17 '15 at 10:29
I want the text stay still and don't fadeOut too – Devstar Jun 17 '15 at 10:29
@Devstar Check Update – Tushar Jun 17 '15 at 10:30

How to Fade out background-color of a div

1 Answers1