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我的意思是您在网址上附加参数。例如。如果您的导航如下所示：

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

然后将页面的颜色附加到URL：

<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

如果你正在使用sessions，你也可以将颜色放在$ _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中。

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

2 个答案: