Fading a div's background on page load using jQuery 1.4, jQuery color and delay()

Question

Hi,

Basically, what I have is 4 or so .php pages, each with the #container div set to a different colour. As I click on each link in the navigation and the new page loads, I want the background to fade in from whatever the previous colour was before. Eg. the background is blue, a new page is clicked, and it fades from blue to red. Not the nicest choices of colours but I'm just testing.

So far I have something like the below and although it fades the background colour, it fades it in from white, as it doesn't know what the previous colour was. I'm using jQuery 1.4 and the jQuery color plugin to animate the fade in.

$(document).ready(function() {  
    $("body.pageOne #container").animate( { backgroundColor: 'blue' }, 2000).delay(5000);  
    $("body.pageTwo #container").animate( { backgroundColor: 'red' }, 2000).delay(5000);  
}); 

Thanks for your help!

Answer 1

The only ways that came to my mind to "hand over" the previous color are either to send the color as a GET parameter (thus appending it to the URL of the link and then of course inject it somehow into your JS in the backend) or load the page via AJAX but which is probably not a good way.

UPDATE:

With GET I mean that you append a parameter to your URL. E.g. if your navigation looks like this:

<ul>
  <li><a href="/page1">Page 1</a></li>
  <li><a href="/page2">Page 2</a></li>
</ul>

then you append the color of the page to the URL:

<ul>
  <li><a href="/page1?color=AAAAAA">Page 1</a></li>
  <li><a href="/page2?color=BBBBBB">Page 2</a></li>
</ul>

Then on the server side you can read the color value and use it. For example if you use PHP (if course you should to error handling and make sure that color contains a valid value):

<div id="container" style="background-color:#<?php GET['color'] ?>" ></div>

Answer 2

If you're using sessions, you can also put the color in a $_SESSION variable, which you update via AJAX once the animation is completed. Then you can set the "original" background color with an inline style on the PHP side.

Js:

$(document).ready(function() {  
    $("body.pageOne #container").animate({backgroundColor: 'blue'},2000,function(){
        bgColor = 'blue';
      }).delay(5000);  
    $("body.pageTwo #container").animate({backgroundColor: 'red'},2000,function(){
        bgColor = 'red';
      })).delay(5000);

    $.post('example.php', {backgroud_color: bgColor}, function(data){
        //may want a return function to check for errors...?
    });   
}); 

PHP:

$_SESSION['background_color'] = $_POST['background_color'];

Output:

$bg = isset($_SESSION['background_color']) ? $_SESSION['background_color'] : 'white';
echo '<div id="container" style="background-color:'.$bg.';">
      </div>';

It's a bit heavy handed compared to @Felix' answer, but saves from putting the value in the URL.