Verblassen eines Hintergrund des div auf Seite lädt mit jQuery 1.4, jQuery Farbe und Verzögerung ()

Question

Im Grunde, was ich habe, ist 4 oder so .php Seiten, die jeweils mit dem #container div Satz zu einer anderen Farbe. Wie ich in der Navigation und die neue Seite geladen wird auf jeden Link klicken, möchte ich den Hintergrund von was auch immer die vorherige Farbe vorher war verblassen in. Z.B. der Hintergrund ist blau, eine neue Seite angeklickt wird, und es verblasst von blau zu rot. Nicht die schönste Auswahl von Farben, aber ich bin gerade getestet wird.

Bisher habe ich so etwas wie die unten und obwohl es die Hintergrundfarbe verblasst, es verblasst es in von weiß, da er nicht weiß, was die vorherige Farbe war. Ich bin mit jQuery 1.4 und der jQuery-Plugin Farbe des Fade-in animieren.

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

Vielen Dank für Ihre Hilfe!

Answer 1

Die einzigen Möglichkeiten, die auf „aushändigen“, um die vorherige Farbe zu mir einfiel sind entweder die Farbe als GET Parameter senden (also an die URL der Verknüpfung und dann natürlich inject es irgendwie in der JS Anhängen in das Backend) oder die Seite über AJAX laden, aber das ist wahrscheinlich kein guter Weg.

UPDATE:

Mit GET meine ich, dass Sie einen Parameter an die URL anhängen. Z.B. wenn Ihr Navigations sieht wie folgt aus:

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

dann anhängen Sie die Farbe der Seite der URL:

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

Dann auf der Serverseite können Sie den color Wert lesen und verwenden. Wenn Sie zum Beispiel verwenden PHP (wenn natürlich sollten Sie die Fehlerbehandlung und stellen Sie sicher, dass color einen gültigen Wert enthält ):

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

Answer 2

Wenn Sie mit Sitzungen , können Sie auch setzen die Farbe in einem $ _SESSION Variable, die Sie über AJAX aktualisiert werden, sobald die Animation abgeschlossen ist. Dann können Sie die „Original“ Hintergrundfarbe mit einem Inline-Stil auf der PHP-Seite eingestellt.

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'];

Ausgabe:

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

Es ist ein bisschen schwer im Vergleich geben @Felix‘Antwort, aber erspart den Wert in der URL setzen.