Сглаживание фона div при загрузке страницы с помощью jQuery 1.4, jQuery color и delay()

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

Если вы используете сеансы, вы также можете поместить цвет в переменную $_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.