使用jQuery 1.4，jQuery颜色和延迟（）

在页面加载时淡出div的背景基本上，我所拥有的是4个左右.php页面，每个页面的#container div设置为不同的颜色。当我点击导航中的每个链接并加载新页面时，我希望背景能够从之前的颜色淡入。例如。背景为蓝色，点击一个新页面，并从蓝色渐变为红色。不是最好的颜色选择，但我只是测试。使用jQuery 1.4，jQuery颜色和延迟（）

到目前为止，我有类似于下面的内容，虽然它会淡化背景色，但它会从白色中淡化，因为它不知道以前的颜色是什么。我使用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); 
});

感谢您的帮助！

来源

2010-02-20 Andrew

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

UPDATE：

随着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-20 23:30:04

不熟悉GET参数，但用ajax尝试过（使用jQuery工具），虽然它工作，但在刷新页面时遇到了问题，并且无法保留颜色。感谢您的回复！ – Andrew 2010-02-20 23:43:22

如果您使用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的回答，但把值保存网址。

来源

2010-02-20 23:32:56 munch

谢谢，我会看看我是否可以给这个镜头 – Andrew 2010-02-20 23:44:18

使用jQuery 1.4，jQuery颜色和延迟（）

回答

相关问题