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

12,366
11
50
83

@StuartWickenden Great! Glad to help! – Robin Carlo Catacutan May 05 '15 at 02:32
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

6,765
3
22
40

jquery fade css not working

2 Answers2