jQuery 1.4、jQuery color、およびlay()を使用してページ読み込み時にdivの背景をフェードアウトする

Question

基本的に、私が持っているのは 4 つほどの .php ページで、それぞれの #container div が異なる色に設定されています。ナビゲーション内の各リンクをクリックして新しいページが読み込まれると、背景が以前の色からフェードインするようにしたいと考えています。例えば。背景が青で、新しいページをクリックすると、青から赤に変わります。色の選択はあまり良くありませんが、ただテストしているだけです。

これまでのところ、私は以下のようなものを持っています、そしてそれは背景色をフェードさせますが、前の色が何であったかを知らないので、白からフェードインします。フェードインをアニメーション化するために jQuery 1.4 と jQuery color プラグインを使用しています。

$(document).ready(function() {  
    $("body.pageOne #container").animate( { backgroundColor: 'blue' }, 2000).delay(5000);  
    $("body.pageTwo #container").animate( { backgroundColor: 'red' }, 2000).delay(5000);  
}); 

ご協力いただきありがとうございます！

Answer 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>

Answer 2

あなたが使用している場合は、

セッションに、あなたも置くことができますアニメーションが完了すると、あなたがAJAX経由で更新する$ _SESSION変数で色、。そして、あなたは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に値を入れてから保存します。