Besoin d'aide sur une action à faire en javascript

Bonjour à tous,
je suis actuellement en train de faire mon portfolio, et je voudrai faire une petite anim sur la home, mais étant un gros débutant (débutant étant beaucoup dire, car je n'y comprend pas grand chose),
je me retrouve face à un problème que je n'arrive pas à résoudre.

initialement j'ai une anim qui se lance dès le départ (bloc1), et en passant en roll-over sur les puces, "bloc1" s'en va pour laisser apparaitre, "bloc2", "bloc3", "bloc4", "bloc5", ensuite en roll-out, "bloc1" reviens à son positionnement d'origine. Jusque là ça fonctionne à peu près si je laisse le temps à "bloc1" de revenir à sa position avant de passé en roll-over sur une autre puce.
Mon problème est que lorsque je passe rapidement de puces en puces, il y a, à priori un bug, "bloc1" se fige, et les autres blocs ou n'apparaissent plus, ou ils apparaissent mais "bloc1" ne bouge plus. A la base je voulais que les anims ne se superposent pas, laisser le temps à "bloc1" de partir avant de faire apparaitre un autre bloc.
N'étant pas adepte des functions et code en général javascript, je sollicite votre aide, merci d'avance.

Pour exemple voilà le lien de ce que cela donne pour le moment :
http://elso.fr/portfolio/index.html"]http://elso.fr/portfolio/index.html

// le code de mes puces ( je ne pense pas qu'il y ai rapport, mais au cas ou)
;( function( window ) {

	'use strict';

	function extend( a, b ) {
		for( var key in b ) { 
			if( b.hasOwnProperty( key ) ) {
				a[key] = b[key];
			}
		}
		return a;
	}

	function DotNav( el, options ) {
		this.nav = el;
		this.options = extend( {}, this.options );
  		extend( this.options, options );
  		this._init();
	}

	DotNav.prototype.options = {};

	DotNav.prototype._init = function() {
		// special case "dotstyle-hop"
		var hop = this.nav.parentNode.className.indexOf( 'dotstyle-hop' ) !== -1;

		var dots = [].slice.call( this.nav.querySelectorAll( 'li' ) ), current = 0, self = this;

		dots.forEach( function( dot, idx ) {
			dot.addEventListener( 'click', function( ev ) {
				ev.preventDefault();
				if( idx !== current ) {
					dots[ current ].className = '';

					// special case
					if( hop && idx < current ) {
						dot.className += ' current-from-right';
					}

					setTimeout( function() {
						dot.className += ' current';
						current = idx;
						if( typeof self.options.callback === 'function' ) {
							self.options.callback( current );
						}
					}, 25 );						
				}
			} );
		} );
	}

	// add to global namespace
	window.DotNav = DotNav;

})( window );

// Mon code mis en place pour l'animation des blocs en javacript.

$(document).ready(function() {

	// Arrivé de superman
	$("#bloc1").animate({"top": "20%"}, "slow");

	// Hover sur l'élément one
	$( "#one" ).hover(function(){
		// entré
		var queue = ($('#bloc2').queue('fx').length)+($('#bloc1').queue('fx').length);
		for (var i=0;i<=queue;i++)
		{
			if(($('#bloc2').queue('fx').length == 0) && ($('#bloc1').queue('fx').length == 0)){
				$('#bloc2').delay( 400 ).animate({
					'right':'0%'
				},
				'slow');
				$("#bloc1").animate({"top": "-=100%"}, "slow", function(){
					$(this).css('top','100%');
				});
			}
		}
	},function(){
		// sortie
		$("#bloc1").animate({"top": "20%"}, "slow", function(){
			$("#bloc1").clearQueue();
		});
		$('#bloc2').animate({
			'right':'-50%'
		},
		'slow', function(){
			$('#bloc2').clearQueue();
		});
	});

	// Hover sur l'élément two
	$( "#two" ).hover(function(){
		// entré
		var queue = ($('#bloc3').queue('fx').length)+($('#bloc1').queue('fx').length);
		for (var i=0;i<=queue;i++)
		{
			if(($('#bloc3').queue('fx').length == 0) && ($('#bloc1').queue('fx').length == 0)){
				$('#bloc3').delay( 400 ).animate({
					'right':'0%'
				},
				'slow');
				$("#bloc1").animate({"top": "-=100%"}, "slow", function(){
					$(this).css('top','100%');
				});
			}
		}
	},function(){
		// sortie
		$("#bloc1").animate({"top": "20%"}, "slow", function(){
			$("#bloc1").clearQueue();
		});
		$('#bloc3').animate({
			'right':'-50%'
		},
		'slow', function(){
			$('#bloc3').clearQueue();
		});
	});

	// Hover sur l'élément tree
	$( "#three" ).hover(function(){
		// entré
		var queue = ($('#bloc4').queue('fx').length)+($('#bloc1').queue('fx').length);
		for (var i=0;i<=queue;i++)
		{
			if(($('#bloc4').queue('fx').length == 0) && ($('#bloc1').queue('fx').length == 0)){
				$('#bloc4').delay( 400 ).animate({
					'right':'0%'
				},
				'slow');
				$("#bloc1").animate({"top": "-=100%"}, "slow", function(){
					$(this).css('top','100%');
				});
			}
		}
	},function(){
		// sortie
		$("#bloc1").animate({"top": "20%"}, "slow", function(){
			$("#bloc1").clearQueue();
		});
		$('#bloc4').animate({
			'right':'-50%'
		},
		'slow', function(){
			$('#bloc4').clearQueue();
		});
	});

	// Hover sur l'élément four
	$( "#four" ).hover(function(){
		// entré
		var queue = ($('#bloc5').queue('fx').length)+($('#bloc1').queue('fx').length);
		for (var i=0;i<=queue;i++)
		{
			if(($('#bloc5').queue('fx').length == 0) && ($('#bloc1').queue('fx').length == 0)){
				$('#bloc5').delay( 400 ).animate({
					'right':'0%'
				},
				'slow');
				$("#bloc1").animate({"top": "-=100%"}, "slow", function(){
					$(this).css('top','100%');
				});
			}
		}
	},function(){
		// sortie
		$("#bloc1").animate({"top": "20%"}, "slow", function(){
			$("#bloc1").clearQueue();
		});
		$('#bloc5').animate({
			'right':'-50%'
		},
		'slow', function(){
			$('#bloc5').clearQueue();
		});
	});
});

Merci d'avance pour votre aide.
Modifié par elso (26 Apr 2014 - 15:41)