使用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顏色和延遲（）

回答

相關問題