multiples transitions en parallele

Version imprimable

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

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
<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:

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:

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...

j'ai allégé la charge de javascript en plaçant dans le code css les delay histoire de tester:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .article .panel0{ background-position:0 0; transition-delay: 0.1s; -moz-transition-delay: 0.1s; -webkit-transition-delay: 0.1s; -ms-transition-delay: 0.1s; -o-transition-delay: 0.1s; } .article .panel1{ background-position:-75px 0; transition-delay: 0.6s; -moz-transition-delay: 0.6s; -webkit-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; }...
du coup mon js ressemble à:
Code:

1 2 3 4 5 6 function fade2d(id,nbrElem){ var objet = document.getElementById(id).getElementsByTagName('span'); for(var i=0;i<nbrElem;i++){ changeOpacElem(0,objet[i]); } }
mais le freeze est toujours présent (je suis obligé de fermer l'onglet et d'en ouvrir un nouveau pour tester de nouveau...)

c'est quand même vachement étrange que l'on puisse faire un nombre aussi réduit de transitions en parallèle non? :(

ça venait bien du javascipt, mais pas de là ou je pensais. j'ai modifié ma façon de faire (pour faire un code plus propre) et le problème c'est résolu de lui même...

du coup je le place ici on sait jamais que ça puisse servir à quelqu'un :)

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
function fade(id,nbrElem){
	var objet = document.getElementById(id).getElementsByTagName('span');
	var index = new Array(nbrElem);
	for(var i=0;i<nbrElem;i++){
		index[i] = i;
	}
	index.shuffle();
	for(var i = 0;i<nbrElem;i++){
		delay(i/nbrElem,index[i],id);
		changeOpacElem(0,objet[index[i]]);
	}	
}
 
function appear(id,nbrElem){
	var objet = document.getElementById(id).getElementsByTagName('span');
	var index = new Array(nbrElem);
	for(var i=0;i<nbrElem;i++){
		index[i] = i;
	}
	index.shuffle();
	for(var i = 0;i<nbrElem;i++){
		delay(i/nbrElem,index[i],id);
		changeOpacElem(1,objet[index[i]]);
	}	
}
 
Array.prototype.shuffle = function () {
   var j, k, l;
   var tmp;
   var i = -1;
   var len = this.length;
   while ( ++i < len ) {
       j = Math.floor(Math.random()*len);
       k = Math.floor(Math.random()*len);
       l = Math.floor(Math.random()*len);
       tmp = this[i];
       this[i] = this[j];
       this[j] = this[k];
       this[k] = this[l];
       this[l] = tmp;
   }
   while ( --i >= 0 ) {
       j = Math.floor(Math.random()*len);
       k = Math.floor(Math.random()*len);
       l = Math.floor(Math.random()*len);
       tmp = this[i];
       this[i] = this[j];
       this[j] = this[k];
       this[k] = this[l];
       this[l] = tmp;
   }
}
 
 
function changeOpacElem(opacity, elem) {
    var object = elem.style;
    object.opacity = opacity;
    object.MozOpacity = opacity;
    object.KhtmlOpacity = opacity;
}
 
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");
}

ce code associé au code html du premier post permet de faire s'effacer une photo petit bout par petit bout sur une durée déterminée par le css (voir premier post) + le delay max definie dans le javascript
désolé pour ceux qui ont cherché une solution (et merci d'avoir jeté un oeil).
bonne journée :)