Bonjour tout le monde !
Je souhaite utiliser une bannière animée en JavaScript mais j'ai un petit problème de mémoire de l'état. Je m'explique...
Voici d'abord le lien vers une demo de la bannière en question http://css-tricks.com/examples/MenuFader/
Voici le code JavaScript qui anime la bannière :
Et voici enfin le code html de son intégration :
Le problème c'est que quand je clique sur un bouton de la bannière, j'ai bien la chargement des données de la page en question (un include du contenu de la page dans ma même pas index), mais la bannière est réinitialisée et du coup c'est le bouton "home" qui est toujours animé
Je cherche donc un moyen de mémoriser l'état de la bannière même après un rechargement de la page.
Merci beaucoup pour votre aide !
Je souhaite utiliser une bannière animée en JavaScript mais j'ai un petit problème de mémoire de l'état. Je m'explique...
Voici d'abord le lien vers une demo de la bannière en question http://css-tricks.com/examples/MenuFader/
Voici le code JavaScript qui anime la bannière :
$(function(){
$("#about-button").css({
opacity: 0.3
});
$("#contact-button").css({
opacity: 0.3
});
$("#page-wrap div.button").click(function(){
$clicked = $(this);
// if the button is not already "transformed" AND is not animated
if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
$clicked.animate({
opacity: 1,
borderWidth: 5
}, 600 );
}
//we reset the other buttons to default style
$clicked.siblings(".button").animate({
opacity: 0.5,
borderWidth: 1
}, 600 );
});
});
Et voici enfin le code html de son intégration :
<div id="page-wrap">
<div id="home-button" class="button">
<a href="/home"><img src="images/menu-home.png" alt="home" class="button" /></a>
</div>
<div id="about-button" class="button">
<a href="/about"><img src="images/menu-about.png" alt="about" class="button"></a>
</div>
<div id="contact-button" class="button">
<a href="/contact"><img src="images/menu-contact.png" alt="contact" class="button"></a>
</div>
</div>
Le problème c'est que quand je clique sur un bouton de la bannière, j'ai bien la chargement des données de la page en question (un include du contenu de la page dans ma même pas index), mais la bannière est réinitialisée et du coup c'est le bouton "home" qui est toujours animé

Je cherche donc un moyen de mémoriser l'état de la bannière même après un rechargement de la page.
Merci beaucoup pour votre aide !