Bonjour, je suis actuellement en train de tester le css3 et j'ai fait cela:

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
<div class="article">
    <ol id="olimg_@a.getId_article()">
        <li class="details"></li>
        <li class="nom">@a.getNom()</li>
    </ol>
    <div class="img" id="img_@a.getId_article()" onmouseover="fade2d('img_@a.getId_article()',10)" onmouseout="appear2d('img_@a.getId_article()',10)">
        <span id="panel0img_@a.getId_article()" class="panel panel0" style="background-image: url('/images/@a.getPhoto().getId_photo()');"></span>
        <span id="panel1img_@a.getId_article()" class="panel panel1" style="background-image: url('/images/@a.getPhoto().getId_photo()');"></span>
        <span id="panel2img_@a.getId_article()" class="panel panel2" style="background-image: url('/images/@a.getPhoto().getId_photo()');"></span>
        <span id="panel3img_@a.getId_article()" class="panel panel3" style="background-image: url('/images/@a.getPhoto().getId_photo()');"></span>
        <span id="panel4img_@a.getId_article()" class="panel panel4" style="background-image: url('/images/@a.getPhoto().getId_photo()');"></span>
        <span id="panel5img_@a.getId_article()" class="panel panel5" style="background-image: url('/images/@a.getPhoto().getId_photo()');"></span>
        <span id="panel6img_@a.getId_article()" class="panel panel6" style="background-image: url('/images/@a.getPhoto().getId_photo()');"></span>
        <span id="panel7img_@a.getId_article()" class="panel panel7" style="background-image: url('/images/@a.getPhoto().getId_photo()');"></span>
        <span id="panel8img_@a.getId_article()" class="panel panel8" style="background-image: url('/images/@a.getPhoto().getId_photo()');"></span>
        <span id="panel9img_@a.getId_article()" class="panel panel9" style="background-image: url('/images/@a.getPhoto().getId_photo()');"></span>
        <span id="panel10img_@a.getId_article()" class="panel panel10" style="background-image: url('/images/@a.getPhoto().getId_photo()');"></span>
        <span id="panel11img_@a.getId_article()" class="panel panel11" style="background-image: url('/images/@a.getPhoto().getId_photo()');"></span>
        <span id="panel12img_@a.getId_article()" class="panel panel12" style="background-image: url('/images/@a.getPhoto().getId_photo()');"></span>
        <span id="panel13img_@a.getId_article()" class="panel panel13" style="background-image: url('/images/@a.getPhoto().getId_photo()');"></span>
        <span id="panel14img_@a.getId_article()" class="panel panel14" style="background-image: url('/images/@a.getPhoto().getId_photo()');"></span>
        <span id="panel15img_@a.getId_article()" class="panel panel15" style="background-image: url('/images/@a.getPhoto().getId_photo()');"></span>
    </div>
</div>

il s'agit d'un bout de code en scala pour l'adresse de la photo(mais c'est pas important ça)
Il permet d'afficher une image complète formée de 16 morceaux (ayant chacun une position différente sur l'image donc)

je cherche lors du hover à effacer les morceaux dans un ordre aléatoire les uns apres les autres, j'ai donc dirigé mon code vers du javascript mais je me trompe peut être? (je ne pense pas pouvoir faire de random en css :/)

j'ai donc ceci:

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
.article{
	height:200px;
	width:300px;
	background-color:#80FF00;
}
 
.article ol{
	list-style:none;
	width:300px;
	height:80px;
	display:block;
	-webkit-padding-start: 0px;
}
 
.article .panel{
    width:75px;
    height:50px;
    position:relative;
    display:block;
    float:left;
	background-size:400% 400%;
	-webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
 
}
 
.article .panel0{
    background-position:0 0;
}
.article .panel1{
    background-position:-75px 0;
}
.article .panel2{
    background-position:-150px 0;
}
.article .panel3{
    background-position:-225px 0;
}
.article .panel4{
    background-position:0 150px;
}
.article .panel5{
    background-position:-75px 150px;
}
.article .panel6{
    background-position:-150px 150px;
}
.article .panel7{
    background-position:-225px 150px;
}
.article .panel8{
    background-position:0 100px;
}
.article .panel9{
    background-position:-75px 100px;
}
.article .panel10{
    background-position:-150px 100px;
}
.article .panel11{
    background-position:-225px 100px;
}
.article .panel12{
    background-position:0 50px;
}
.article .panel13{
    background-position:-75px 50px;
}
.article .panel14{
    background-position:-150px 50px;
}
.article .panel15{
    background-position:-225px 50px;
}
pour l'affichage, et cela:

Code javascript : 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
function fade2d(id,nbrElem){
    var objet = document.getElementById(id).getElementsByTagName('span');
	var ids = new Array(nbrElem);
	var liste = "";
	var temp;
	var l = 0;
	while(l < nbrElem){
		temp = Math.floor((Math.random()*nbrElem));
		if(liste.indexOf(temp)==-1){
			liste += '-'+temp;
			ids[l] = temp;
			delay(l/nbrElem,temp,id);
			l++;
		}
	}
	for(var i = 0; i < nbrElem;i++){
		changeOpacElem(0,objet[ids[i]]);
	}
}
 
function delay(val, temp, id) {
    $('#panel'+temp+id).css('transition-delay', val+"s");
    $('#panel'+temp+id).css('-moz-transition-delay', val+"s");
    $('#panel'+temp+id).css('-webkit-transition-delay',val+"s");
    $('#panel'+temp+id).css('-ms-transition-delay', val+"s");
    $('#panel'+temp+id).css('-o-transition-delay', val+"s");
}
 
function changeOpacElem(opacity, elem) {
    var object = elem.style;
    object.opacity = opacity;
    object.MozOpacity = opacity;
    object.KhtmlOpacity = opacity;
}

pour l'action. j'ai découper la config des delay et le changement d'opacité (et donc la transaction) pour tester mais j'ai également testé en le plaçant à la ligne "ids[l] = temp;" à la place de ce code. le résultat étant le même => freeze complet de google chrome, firefox et midori...
si je réduit à 11 cases ça fonctionne sans problème, à 12 je freeze... j'imagine que c'est un problème de parallélisme des transitions mais du coup je ne sais pas trop quoi faire:
-améliorer mon javascript pour faire les délais différemment?
-le faire en css pour éviter le problème du javascript?
-autre?

j'ai hésité entre poster ici et dans la section javascript mais vu que dans l'idéal j'aimerai éviter le js pour tout faire en css...