Desbotando o fundo de uma div na página de página usando o jQuery 1.4, JQuery Color and Atrasy ()

Question

Basicamente, o que eu tenho são 4 ou mais páginas .php, cada uma com o #Container Div definido para uma cor diferente. Enquanto clico em cada link na navegação e na nova página carrega, quero que o plano de fundo desapareça de qualquer cor anterior antes. Por exemplo. O fundo é azul, uma nova página é clicada e desaparece de azul ao vermelho. Não são as melhores opções de cores, mas estou apenas testando.

Até agora, eu tenho algo como o abaixo e, embora desapareça a cor do fundo, ele desaparece de branco, pois não sabe qual era a cor anterior. Estou usando o jQuery 1.4 e o plugin de cores jQuery para animar o desbotamento.

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

Obrigado pela ajuda!

Answer 1

As únicas maneiras que me vieram em minha mente para "entregar" a cor anterior são enviar a cor como um GET O parâmetro (anexando -o ao URL do link e, é claro, injete -o de alguma forma no seu JS no back -end) ou carregue a página via Ajax, mas que provavelmente não é uma boa maneira.

ATUALIZAR:

Com GET Quero dizer que você anexa um parâmetro ao seu URL. Por exemplo, se sua navegação se for assim:

<ul>
  <li><a href="/page1">Page 1</a></li>
  <li><a href="/page2">Page 2</a></li>
</ul>

Então você anexa a cor da página ao URL:

<ul>
  <li><a href="/page1?color=AAAAAA">Page 1</a></li>
  <li><a href="/page2?color=BBBBBB">Page 2</a></li>
</ul>

Então, no lado do servidor, você pode ler o color valor e use -o. Por exemplo, se você usar o php (se o curso você deve lidar com erros e verifique se isso color contém um valor válido):

<div id="container" style="background-color:#<?php GET['color'] ?>" ></div>

Answer 2

Se você está usando Sessões, você também pode colocar a cor em uma variável $ _Session, que você atualiza via Ajax assim que a animação for concluída. Em seguida, você pode definir a cor de fundo "original" com um estilo embutido no lado do 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'];

Resultado:

$bg = isset($_SESSION['background_color']) ? $_SESSION['background_color'] : 'white';
echo '<div id="container" style="background-color:'.$bg.';">
      </div>';

É um pouco pesado em comparação com a resposta do @felix, mas economiza de colocar o valor no URL.