Salut !

Suite à cette discussion : http://www.developpez.net/forums/d82...e-in-fade-out/
j'ai écrit un petit script de fading d'éléments HTML.
Je sais qu'il en existe déjà quelques uns ici même, mais celui-ci est totalement non intrusif

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
78
79
// Options (objet) :
//		elt		Requis		Elément HTML		Elément sur lequel s'applique le script
//		min		Optionnel	nombre ou chaine	Valeur de l'opacité sans survol								Défaut : 25
//		max		Optionnel	nombre ou chaine	Valeur de l'opacité au survol								Défaut : 100
//		speed	Optionnel	nombre ou chaine	Intervalle (ms) entre chaque changement						Défaut : 25
//		step	Optionnel	nombre ou chaine	Variation de la valeur d'opacité à chaque changement		Défaut : 5
//		evtOn	Optionnel	chaine				Evenement déclenchant le fading								Défaut : 'mouseover'
//		evtOff	Optionnel	chaine				Evenement déclenchant le fading inverse						Défaut : 'mouseout'
//		eltOn	Optionnel	Elément HTML				Elément déclenchant le fading						Défaut : options.elt
//
//	Exemple d'utilisation : new Fading({'elt': document.images[0], 'min': 50, 'max': '100', speed: 25, step: 5});
 
var Fading = function(options){
	this.elt = options.elt;
	this.min = options.min >= 0 ? +options.min : 25;
	this.max = options.max >= 0 ? +options.max : 100;
	this.courant = options.min >= 0 ? +options.min : 25;
	this.speed = +options.speed || 50;
	this.step = +options.step || 5;
	this.timer = null;
	this.evtOn = options.evtOn || 'mouseover';
	this.evtOn = this.evtOn.replace(/^on/, '');
	this.evtOff = options.evtOff || 'mouseout';
	this.evtOff = this.evtOff.replace(/^on/, '');
	this.eltOn = options.eltOn || options.elt;
	var that = this;
	if(this.elt.filters){
		this.elt.style.width = this.elt.style.width || this.elt.offsetWidth+'px';
		this.elt.style.filter = 'alpha(opacity='+this.min+')';
		this.elt.filters[0].opacity = this.min;
		this.propOp = this.elt.filters[0];
		this.coeff = 1;
	}
	else{
		this.elt.style.opacity = this.min / 100;
		this.propOp = this.elt.style;
		this.coeff = 100;
	}
	this.on = function(){
		clearTimeout(that.timer);
		that.removeEvent(that.eltOn, that.evtOn, that.on);
		that.addEvent(that.eltOn, that.evtOff, that.off);
		that.changeOp(that.courant, that.max);
	}
	this.off = function(){
		clearTimeout(that.timer);
		that.removeEvent(that.eltOn, that.evtOff, that.off);
		that.addEvent(that.eltOn, that.evtOn, that.on);
		that.changeOp(that.courant, that.min);
	}
	this.addEvent(this.eltOn, this.evtOn, this.on);
}
Fading.prototype.changeOp = function(from, to){
	var that = this;
	if(from == to){
		this.propOp.opacity = to / this.coeff;
		return false;
	}
	this.propOp.opacity = this.courant / this.coeff;
	var pas = from < to ? 1 : -1;
	this.courant = Math.abs(from - to) < this.step ? to : from + (this.step * pas);
	this.timer = setTimeout(function(){that.changeOp(that.courant, to)}, this.speed);
}
Fading.prototype.addEvent = function(element, type, callback){
	if (element.attachEvent) {
        element.attachEvent("on" + type, callback);
    }
    else {
        element.addEventListener(type, callback, false);
    }
};
Fading.prototype.removeEvent = function(elt, type, callback){
    if (elt.detachEvent) {
		elt.detachEvent("on" + type, callback);
    }
    else {
        elt.removeEventListener(type, callback, false);
    }
};
Voir une page de tests : http://javascript.developpez.com/demos/fading/