1

基本上，我有 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);  
});

谢谢你的帮助！

4

2 回答 2

0

我想到“移交”以前颜色的唯一方法是将颜色作为GET参数发送（因此将其附加到链接的 URL，然后当然以某种方式将其注入到后端的 JS 中）或通过 AJAX 加载页面，但这可能不是一个好方法。

更新：

我GET的意思是您将参数附加到您的 URL。例如，如果您的导航如下所示：

<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>
于 2010-02-20T23:30:04.730 回答
0

如果您使用会话，您还可以将颜色放入 $_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 中。

于 2010-02-20T23:32:56.347 回答