Mouvement de div basé sur la position 'top'

Bonjour à tous,

J'ai une liste de liens qui font une action sur un enchaînement de div : ils les font monter ou descendre en fonction de leur attribut css 'top'.

Tous les div ont une hauteur de 100%, sont en position absolute et doivent remonter à top:-100%, se caler à top:0 ou descendre à top:100%.

Tout fonctionne correctement SAUF sur le retour au premier div...
J'ai essayer 50 solutions différentes et... rien.

Merci du coup de main!

Mon HTML:

<!--- Controle --->
<ul id="nav-pres">
	<li>
		<a class="navigation-pres on" id="nav-intro-pres">
			<img src="images/nav-intro.png" alt="Intro" />
			<span class="cache">
				Intro
			</span>
		</a>
	</li>
	<li>
		<a class="navigation-pres" id="nav-concep-pres">
			<img src="images/nav-conception.png" alt="Conception" />
			<span class="cache">
				Conception
			</span>
		</a>
	</li>
	<li>
		<a class="navigation-pres" id="nav-rea-pres">
			<img src="images/nav-realisation.png" alt="Réalisation" />
			<span class="cache">
				Réalisation
			</span>
		</a>
	</li>
	<li>
		<a class="navigation-pres" id="nav-post-pres">
			<img src="images/nav-post-prod.png" alt="Post-prod" />
			<span class="cache">
				Post-prod
			</span>
		</a>
	</li>
	<li>
		<a class="navigation-pres" id="nav-diff-pres">
			<img src="images/nav-diffusion.png" alt="Diffusion" />
			<span class="cache">
				Diffusion
			</span>
		</a>
	</li>
</ul>

<!-- Div à bouger -->
<div id="content-pres">
	<div id="intro-pres" class="bla-pres"></div>
	<div id="concep-pres" class="bla-pres"></div>
	<div id="rea-pres" class="bla-pres"></div>
	<div id="post-pres" class="bla-pres"></div>
	<div id="diff-pres" class="bla-pres"></div>
</div>

Mon jQuery :

	$('.navigation-pres').click(function(){
		if(!$(this).hasClass('on')){
			$('.navigation-pres').removeClass('on');
			$(this).addClass('on');
		}
	});

	if(!($('#nav-intro-pres').hasClass('on'))){
		$('#nav-intro-pres').click(function(){
			alert('MARCHEUH!');
			$('#intro-pres').nextAll('.bla-pres').animate({top : '100%'});
			$('#intro-pres').animate({top : '0'});
		});
	}

	if(!($('#nav-concep-pres').hasClass('on'))){
		$('#nav-concep-pres').click(function(){
			if($('#concep-pres').css('top') > '0'){
				$('#concep-pres').animate({top : '0'});
				$('#concep-pres').prevAll('.bla-pres').animate({top : '-100%'});
			}else if($('#concep-pres').css('top') < '0'){
				$('#concep-pres').nextAll('.bla-pres').animate({top : '100%'});
				$('#concep-pres').animate({top : '0'});
			}
		});
	}

	if(!($('#nav-rea-pres').hasClass('on'))){
		$('#nav-rea-pres').click(function(){
			if($('#rea-pres').css('top') > '0'){
				$('#rea-pres').animate({top : '0'});
				$('#rea-pres').prevAll('.bla-pres').animate({top : '-100%'});
			}else if($('#rea-pres').css('top') < '0'){
				$('#rea-pres').nextAll('.bla-pres').animate({top : '100%'});
				$('#rea-pres').animate({top : '0'});
			}
		});
	}

	if(!($('#nav-post-pres').hasClass('on'))){
		$('#nav-post-pres').click(function(){
			if($('#post-pres').css('top') > '0'){
				$('#post-pres').animate({top : '0'});
				$('#post-pres').prevAll('.bla-pres').animate({top : '-100%'});
			}else if($('#post-pres').css('top') < '0'){
				$('#post-pres').nextAll('.bla-pres').animate({top : '100%'});
				$('#post-pres').animate({top : '0'});
			}
		});
	}

	if(!($('#nav-diff-pres').hasClass('on'))){
		$('#nav-diff-pres').click(function(){
			if($('#diff-pres').css('top') > '0'){
				$('#diff-pres').animate({top : '0'});
				$('#diff-pres').prevAll('.bla-pres').animate({top : '-100%'});
			}else if($('#diff-pres').css('top') < '0'){
				$('#diff-pres').animate({top : '0'});
			}
		});
	}

Modifié par LeHudiaa (09 Mar 2014 - 14:04)

Bonjour,

Malheureusement, non
Tout est en local...

Bon, en supprimant la condition hasClass('on'), tout fonctionne correctement...
Si jamais quelqu'un avait un moyen plus propre d'écrire ce que j'ai fait, je suis toujours preneur!
:)

Pourquoi pas des ancres html mélées à un simple script de fluidification des mouvements?
sans oublier css je vois nottamment que la page descend à blanc bref ^^
Modifié par VinceCotta (16 Mar 2014 - 21:04)