在使用jQuery 1.4页面加载衰落div的背景，jQuery的颜色和延迟（）

Question

基本上，我已经是4个左右.php页各自与#container的DIV设置为不同的颜色。当我点击导航和新的页面加载各个环节，我希望背景中无论从任何先前的颜色是以前褪色。例如。背景是蓝色的，一个新的页面被点击，它由蓝色渐变为红色。没有颜色的最好的选择，但我只是测试。

到目前为止，我有类似下面，虽然它消失的背景颜色，它消失在它从白色，因为它不知道以前的颜色了。我使用jQuery 1.4和jQuery的颜色插件进行动画在淡入淡出。

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

感谢您的帮助！

Answer 1

这是来到了我的脑海里“拱手”以前的颜色的唯一途径要么是发送颜色作为GET参数（因此它追加到链接的URL，然后当然它注入莫名其妙地进入你的JS在后端）或通过AJAX加载网页，但这可能不是一个好方法。

<强>更新

使用GET我的意思是你追加一个参数的URL。例如。如果您的导航看起来像这样：

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

那么你的页面的颜色附加到网址：

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

然后在服务器侧就可以读取color值并使用它。例如，如果你使用PHP（如果你当然应该对错误处理和确保color的包含有效的值）：

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

Answer 2

如果您正在使用访问，你也可以把颜色在$ _SESSION变量，一旦动画完成后，你通过AJAX更新。然后你可以设置“原始”的背景颜色与在PHP端内嵌样式。

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

输出：

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

这是一个有点重手相比@Felix的回答，但是从投入的价值在URL中保存。