Bonjour à tous !

J'ai un problème concernant des animations sur une de mes pages.
Je vous explique:
J'ai une petite foule de personnage. Chaque personnage est composé d'un sprite en 3 parties.
J'utilise la bibliothèque Spritely.js pour pouvoir parcourir mon sprite et en faire une animation.

L'idée est de faire faire une ola à la foule. Le personnage ayant un sprite en 3 parties possède 3 états:
- état 0: bras contre le corps
- état 1: bras à moitier levé
- état 2: bras complètement levé

Je vous mets ici les codes de mes pages html/scss/js

HTML :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>TEST</title>
  <!-- build:css css/main.css -->
  <link rel="stylesheet" href="stylesheets/screen.css">
 
  <!-- endbuild -->
  <?php $j = 0; ?>
 
</head>
<body>
  <div class="container">
        <?php for ($i=0; $i < 42 ; $i++) { 
          $p = rand(0,7);
          if ($j == 13) {
            echo '<div id="perso-'.$p.'" class="gif '.$j.'"></div>';
            $j = 0;
          } else {
            echo '<div id="perso-'.$p.'" class="gif '.$j.'"></div>';
            $j++;
          }
        }
        ?>
  </div>
 
	<!-- build:js js/main.js -->
  <script src="js/jquery-1.3.2.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.spritely/0.6.8/jquery.spritely.js"></script>
  <!-- <script src="js/jquery.spritely-0.4.js"></script> -->
  <script src="js/main.js"></script>                
	<!-- endbuild -->
 
</body>
</html>

CSS:
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
 
@import "compass/reset";
@import "compass";
 
@for $i from 0 through 7 {
  #perso-#{$i} { background: url(img/perso#{$i}.png) no-repeat top left; width:179px;height:200px; float:left; margin-left:0px;}
}
 
.container{
	width: 100%;
	min-height:1300px;
	margin:30px auto;
}

JS:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
(function(){
 
var i = 0;
var _nbrColumn = 13;
var _fps = 6.5;
var _interval = 500;
 
var check = function(){
    if(i < _nbrColumn){
        if (i == 0) {
    		$('.' + i).sprite({fps: _fps, no_of_frames: 3, play_frames: 3});
    		i++;
    		console.log('woop -> premier passage done');
    	} else {
    		$('.' + (i-1)).sprite({fps: _fps, no_of_frames: 3, play_frames: 2, rewind: true});
    		$('.' +  (i) ).sprite({fps: _fps, no_of_frames: 3, play_frames: 3});
    		i++;
    	}
    	setTimeout(check, _interval);
    }
    else {
        console.log('done');// check again in a second
    }
}
 
$('.container').click(function ola(){
check();
});
 
 
})(jQuery);
Malheureusement comme vous pouvez le voir ici: http://www.woodleg.fr/test-perso/ , l'animation ne marche pas bien et je ne comprends pas pourquoi ... Cette page est pour un test à savoir que la foule plus tard sera bien plus imposante ()
Je me tourne donc vers vous pour un petit peu d'aide et essayer de me débloquer.
J'espère avoir été suffisamment clair dans l'énonciation de mon problème.

J'attends vos retours, conseils, aide avec joie !
Cordialement et numériquement, Woodleg.

PS: J'ai essayé avec un autre algo que suis :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
var i = 0;
var _playFramePre = 2;
var _startFramePre = 1;
var _playFrame = 1;
var _startFrame = 1;
var _startFramePre2 = 0;
var _nbrColumn = 47;
var _fps = 3;
var _interval = 200;
 
var check = function(){
    if(i < _nbrColumn){
        if (i == 0) {
		    _startFrame = 2; 
    		_playFrame = 2;
    		$('.' + i).sprite({fps: _fps, no_of_frames: 3, play_frames: _playFramePre, start_at_frame: _startFramePre})
    		i++;
    		_startFramePre = 3;
    		_playFramePre = 1;
    		_playFrame = _playFramePre;
    		_startFrame = 1;
 
    		console.log('woop -> premier passage done');
    	} else {
    		if (i == 1){
    			$('.' + (i-1)).sprite({fps: _fps, no_of_frames: 3, play_frames: _playFramePre, start_at_frame: _startFramePre, rewind: true});
    			console.log('Animation -> personnage i-1 en reverse (frame 3 -> frame 2)');
    			$('.' + (i)).sprite({fps: _fps, no_of_frames: 3, play_frames: _playFrame, start_at_frame: _startFrame});
    			console.log('Animation -> personnage i en normal (frame 1 -> frame 2)');	   
 
    			i++;
    			console.log('woop -> deuxieme passage done'); 			
    		} else {
    			_startFramePre2 = _startFramePre - 1;
    			$('.' + (i-2)).sprite({fps: _fps, no_of_frames: 3, play_frames: _playFramePre, start_at_frame: _startFramePre2, rewind: true});
    			console.log('Animation -> personnage i-2 ('+(i-2)+') en reverse (frame 2 -> frame 1)');
    			$('.' + (i-1)).sprite({fps: _fps, no_of_frames: 3, play_frames: _playFramePre, start_at_frame: _startFramePre2});
				console.log('Animation -> personnage i-1 ('+(i-1)+') en reverse (frame 2 -> frame 3)');
				$('.' +  (i) ).sprite({fps: _fps, no_of_frames: 3, play_frames: _playFrame, start_at_frame: _startFrame});
				_startFramePre = _startFramePre - 1;
 
 
				console.log('woop -> '+i);
				i++;
 
    		}
    	}
    	setTimeout(check, _interval);
    }
    else {
        console.log('done');// check again in a second
    }
}
 
$('.box-envoi').click(function ola(){
check();
});
Mais pareil, ca ne marche pas très bien ...