使用 jQuery 1.4、jQuery color 和 delay() 在页面加载时淡化 div 的背景答案

【问题标题】：Fading a div's background on page load using jQuery 1.4, jQuery color and delay()使用 jQuery 1.4、jQuery color 和 delay() 在页面加载时淡化 div 的背景
【发布时间】：2010-02-20 23:00:15
【问题描述】：

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

感谢您的帮助！

【问题讨论】：

标签： jquery colors jquery-animate fade background-color

【解决方案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>

然后将页面的颜色附加到 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>

【讨论】：

不熟悉 GET 参数，但确实使用 ajax（使用 jquery 工具）尝试过，虽然它有效，但我在刷新页面时遇到了问题，并且无法保留颜色。感谢您的回复！

【解决方案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。

【讨论】：

谢谢，我看看能不能试试