Skip to main content

Forums

This topic contains 9 replies, has 3 voices, and was last updated by  Steven Morgan 5 years, 9 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #152974

    schart
    Participant

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

    #152976

    Steven Morgan
    Participant

    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.

    #152977

    schart
    Participant

    This reply has been reported for inappropriate content.

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

    #152978

    Paulie_D
    Moderator

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

    #152979

    schart
    Participant

    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?

    #152982

    Steven Morgan
    Participant

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

    #152983

    schart
    Participant

    This reply has been reported for inappropriate content.

    Okay thanks:)

    #152984

    Paulie_D
    Moderator

    Is it that simple?

    It sure is

    #152985

    schart
    Participant

    This reply has been reported for inappropriate content.

    Again, thanks:)

    #152987

    Steven Morgan
    Participant

    ^perfect

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

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star