Исчезновение фона div при загрузке страницы с использованием jQuery 1.4, цвета jQuery и delay () - PullRequest
Новая
       29

Исчезновение фона div при загрузке страницы с использованием jQuery 1.4, цвета jQuery и delay ()

1 голос
/ 21 февраля 2010

По сути, у меня есть 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);  
});

Спасибо за вашу помощь!

Ответы [ 2 ]

0 голосов
/ 21 февраля 2010

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

0 голосов
/ 21 февраля 2010

Единственный способ, которым мне пришло в голову «передать» предыдущий цвет, - это либо отправить цвет в качестве параметра 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>
...