在使用jQuery 1.4页面加载衰落div的背景,jQuery的颜色和延迟()
-
21-09-2019 - |
题
基本上,我已经是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);
});
感谢您的帮助!
解决方案
这是来到了我的脑海里“拱手”以前的颜色的唯一途径要么是发送颜色作为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>
其他提示
如果您正在使用访问,你也可以把颜色在$ _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中保存。
不隶属于 StackOverflow