11486 sujets

JavaScript, DOM et API Web HTML5

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 :


	    $(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é Smiley decu

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 !