Suite à cette discussion, je me suis amusé à réaliser un script assez simple de fondu enchainé.

Le fonctionnement est plutôt simple (enfin... je pense) : vous positionnez vos images les unes par-dessus les autres (dans l'exemple, en les positionnant en absolute) et vous lancez le script en passant en paramètre le nom de classe CSS des élément à enchainer.
Ensuite, le script modifie les propriétés z-index et d'opacité pour réaliser l'effet.

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
var Fondu = function(classe_img){
	this.classe_img = classe_img;
        this.courant = 0;
	this.coeff = 100;
	this.collection = this.getImages();
	this.collection[0].style.zIndex = 100;
	this.total = this.collection.length - 1;
	this.encours = false;
}
Fondu.prototype.getImages = function(){
	var tmp = [];
	if(document.getElementsByClassName){
		tmp = document.getElementsByClassName(this.classe_img);
	}
	else{
		var i=0;
		while(document.getElementsByTagName('*')[i]){
			if(document.getElementsByTagName('*')[i].className.indexOf(this.classe_img) > -1){
				tmp.push(document.getElementsByTagName('*')[i]);
			}
			i++;
		}
	}
	var j=tmp.length;
	while(j--){
		if(tmp[j].filters){
			tmp[j].style.width = tmp[j].style.width || tmp[j].offsetWidth+'px';
			tmp[j].style.filter = 'alpha(opacity=100)';
			tmp[j].opaque = tmp[j].filters[0];
			this.coeff = 1;
		}
		else{
			tmp[j].opaque = tmp[j].style;
		}
	}
	return tmp;
}
Fondu.prototype.change = function(sens){
	if(this.encours){
		return false;
	}
	var prevObj = this.collection[this.courant];
	this.encours = true;
	if(sens){
		this.courant++;
		if(this.courant>this.total){
			this.courant = 0;
		}
	}
	else{
		this.courant--;
		if(this.courant<0){
			this.courant = this.total;
		}
	}
	var nextObj = this.collection[this.courant];
	nextObj.style.zIndex = 50;
	var tmpOp = 100;
	var that = this;
	var timer = setInterval(function(){
		if(tmpOp<0){
			clearInterval(timer);
			timer = null;
			prevObj.opaque.opacity = 0;
			nextObj.style.zIndex = 100;
			prevObj.style.zIndex = 0;
			prevObj.opaque.opacity = 100 / that.coeff;
			that.encours = false;
		}
		else{
			prevObj.opaque.opacity = tmpOp / that.coeff;
			tmpOp -= 5;
		}
	}, 25);
}
Exemple en ligne

Je pense que beaucoup de choses peuvent être améliorées, mais j'avoue l'avoir codé assez rapidement, donc n'hésitez pas à proposer vos améliorations