Fondu de fond d'une div à la page charge à l'aide jQuery 1.4, la couleur et le retard jQuery ()

Question

En fait, ce que j'ai est 4 ou si les pages .php, chacun avec le #container div ensemble à une couleur différente. Comme je clique sur chaque lien dans la navigation et les nouvelles charges de page, je veux l'arrière-plan de fondu depuis quelle que soit la couleur précédente était avant. Par exemple. l'arrière-plan est bleu, une nouvelle page est cliqué, et il disparaît du bleu au rouge. Pas les choix les plus agréables de couleurs, mais je suis juste tester.

Jusqu'à présent, j'ai quelque chose comme ci-dessous et bien qu'il efface la couleur de fond, elle se fane dans du blanc, car il ne sait pas ce que la couleur était précédente. J'utilise jQuery 1.4 et le plugin jQuery couleur pour animer le fondu.

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

Merci pour votre aide!

Answer 1

Les seuls moyens qui sont venus à l'esprit de « la main sur » la couleur précédente sont soit d'envoyer la couleur en tant que paramètre GET (annexant ainsi à l'URL du lien, puis d'injecter cours en quelque sorte dans votre JS en le back-end) ou charger la page via AJAX, mais qui est probablement pas une bonne façon.

Mise à jour:

Avec GET Je veux dire que vous ajoutez un paramètre à votre URL. Par exemple. si votre navigation ressemble à ceci:

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

vous ajoutez la couleur de la page à l'URL:

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

Ensuite, du côté du serveur, vous pouvez lire la valeur de color et de l'utiliser. Par exemple, si vous utilisez PHP (si bien sûr, vous devriez à la gestion des erreurs et assurez-vous que color contient une valeur valide ):

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

Answer 2

Si vous utilisez , vous pouvez aussi mettre la couleur dans une variable $ _SESSION, que vous mettez à jour via AJAX une fois l'animation terminée. Ensuite, vous pouvez définir la couleur d'arrière-plan « original » avec un style en ligne sur le côté 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'];

Sortie:

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

Il est un peu lourd par rapport à main réponse « @Felix, mais évite de mettre la valeur dans l'URL.