Enchainement d'animations

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

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
// 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 );

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
// Mon code mis en place pour l'animation des blocs en javacript.
 
$(document).ready(function() {
 
	// Arrivé de bloc1
	$("#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 three
	$( "#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.