I've got a black background, so what I want to do is I want to click a link to make the background slowly start to turn redder. I want this gradual change to stay consistent as the player clicks through more links. If it doesn't make sense, I can clarify.

You'd probably want javascript something like:

    $('#output').animate({backgroundColor: 'red'}, 5000);

Similar to the css() function, but with a duration at the end (in this example, 5000ms, or 5 seconds)

Thanks. I know this script can work, but it doesn't for some reason. Is there a js plugin that I need to execute this?

To make animate work with colours, you need to have jQuery UI or the jQuery.Color plugin. I tried it out using Squiffy on the website, and it seemed to work… but it looks like that's because one of my chrome plugins is loading jquery UI on every site.

An alternative would be to use a timeout function to change the colour; or to create a red div behind the page, and animate its opacity.

I wanted to create a red div behind the page and animate its opacity, so I tried using the already existing squiffy container.

"Maybe it's just as well," I said. Nuns are a bad-luck bunch.

[[Continue]]


[[Continue]]:
    $("#squiffy-container").css("opacity": "0");
    $("#squiffy-container").animate({"opacity": "1"}300);

"This is it, this is it, this has to be it, there's the school, there's the garage, now we turn south."

But both of those lines of js ruins my whole program, so I end up just getting a blank screen that says "SyntaxError; missing ) after argument list".

What am I doing wrong?

And does the alternative solution that you suggest with the timeout function changes the background color gradually? I've been using it for quick background cuts, but not gradual color changes.

I realized my mistake. "opacity": "0" really should have had a comma instead of a colon. I instead used another method where I made the div, set it's the transition to the number of seconds I wanted, made an id for the div, then did this:

div#red
{ 
    background-color: rgba(205, 0, 0, 0);
    height: 100vh;
    width: 100vw;
    transition:60s;
    margin: 0;
    padding: 0;
    border: 0;
}

When I wanted to show it, all I had to do was:

    $("#red").css("background-color", "rgba(205, 0, 0, 1)");

I still changed the opacity but animating it turned out to be unnecessary. It still got the fade in stuff that I wanted.

Thank you for your help, good sir. It was deeply appreciated.