jquery fade css not working

Question

I am trying to make the background change colour based on idle / movement.

that works, but i cannot get it to fade using fadeIn.

JSFiddle - Working example without the fade

What is the best solution to fade the backgrounds at the point of

$("body").css('background-color','#000');

 $(document).ready(function () {
        var idleState = false;
        var idleTimer = null;
        $('*').bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', function () {
            clearTimeout(idleTimer);
            if (idleState == true) { 

                    $("body").css('background-color','#fff'); 

            }
            idleState = false;
            idleTimer = setTimeout(function () { 

                    $("body").css('background-color','#000');

                idleState = true; }, 2000);
        });
        $("body").trigger("mousemove");
});

score 6 · Accepted Answer · answered May 05 '15 at 02:29

6

You can use animate instead of css to achieve what you want.

 $('body').animate({"background-color":"#fff"}, 1000);

answered May 05 '15 at 02:29

Robin Carlo Catacutan

13,249
11
52
85

2

@DavidAnderton yep, try running that code on console log. Make sure to change the background-color value to see the results. – Robin Carlo Catacutan May 05 '15 at 02:42
You are right my bad - I had read http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor and got the impression it wasn't possible using vanilla animate – David May 05 '15 at 02:48
@DavidAnderton no problem man, that post do give a wrong impression. If I have searched that first I could have argued with my post. – Robin Carlo Catacutan May 05 '15 at 02:55

score 2 · Answer 2 · answered May 05 '15 at 02:31

2

Use CSS.

body {
    transition: background-color 1s;
}

answered May 05 '15 at 02:31

Ruslanas Balčiūnas

7,310
3
24
41

jquery fade css not working

2 Answers2