How to use fadein () to change background color?

Question

How to use fadein () to change background color?

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I would like to have the effect between the colors have a fade effect. Who knows using .fadein() .

$(function () {
    var colors = ["#0099cc", "#c0c0c0", "#587b2e", "#990000", "#000000", "#1C8200", "#987baa", "#981890", "#AA8971", "#1987FC", "#99081E"];
    setInterval(function(){
        var bodybgarrayno = Math.floor(Math.random() * colors.length);
        var selectedcolor = colors[bodybgarrayno];
        $("body").css("background", selectedcolor);
    }, 3000);
})

jquery fadein

asked by anonymous 01.12.2014 / 04:09

2 answers

Undeclared variable How to add and remove fields generated via CakePHP, dynamically?

score 2 · Answer 1

I suggest using CSS to do this, it's very simple, you just need:

body{
    transition: background-color 1s;
}

And to change the speed you only need to change 1s which means 1 second.

$(function () {
    var colors = ["#0099cc", "#c0c0c0", "#587b2e", "#990000", "#000000", "#1C8200", "#987baa", "#981890", "#AA8971", "#1987FC", "#99081E"];
    setInterval(function () {
        var bodybgarrayno = Math.floor(Math.random() * colors.length);
        var selectedcolor = colors[bodybgarrayno];
        $("body").css("background", selectedcolor);
    }, 3000);
})

body{
    transition: background-color 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 0 · Answer 2

Try to use animate , I know that in div it works but I do not know in body.

$("body").animate({
          backgroundColor: selectedcolor
}, 1000);

I could not test because I'm on my cell phone, but I think it's going to roll.