All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

Fade background color with jQuery?

  • # October 14, 2013 at 12:34 pm

    So I need to be able to fade to another background color using jQuery. Let’s say from #6495CA to #CD3333 for example. Thanks.

    # October 14, 2013 at 12:52 pm

    Is this an on click event or anything? If so the basic idea is:

    $("#yourDiv").click(function() {
        $(this).toggleClass('clicked');
    });
    

    And in your CSS:

    #yourDiv {
       background-color: #6495CA;
    }
    .clicked {
         background-color: #CD3333;
    }
    

    So basically, your div will be whatever color it is supposed to be in your CSS. Then when it’s clicked, it will add the class ‘clicked’ which will override the original color with the new ‘clicked’ bg color.

    # October 14, 2013 at 12:54 pm

    This reply has been reported for inappropriate content.

    I was unclear, I meant the body background. I doubt that is as simple, is it?

    # October 14, 2013 at 12:55 pm

    You’d have to add a transition to get the fade. That’s not hard though.

    # October 14, 2013 at 12:56 pm

    This reply has been reported for inappropriate content.

    Like a simple transition for background-color to the body{} css? Is it really that simple? Should I use ease-in-out, or?

    # October 14, 2013 at 1:01 pm

    You could do something like this:
    $(‘body’).animate({backgroundColor: ‘#CD3333’}, ‘slow’);

    # October 14, 2013 at 1:02 pm

    This reply has been reported for inappropriate content.

    Okay thanks:)

    # October 14, 2013 at 1:03 pm

    Is it that simple?

    It sure is

    http://codepen.io/anon/pen/LyiFg

    # October 14, 2013 at 1:03 pm

    This reply has been reported for inappropriate content.

    Again, thanks:)

    # October 14, 2013 at 1:05 pm

    ^perfect

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed