Discussion :

[Bovino]

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/

[Bovino]

Suite à différentes remarques de Spaffy, le script a été mis à jour.
Désormais, il est possible de déterminer quels événements vont déclencher le fading. Ces événements (paramètres evtOn et evtOff du hash d'option) peuvent être déclarés avec ou sans le "on" initial.

Le premier post est à jour ainsi que la page d'exemples.

Améliorations prévues : gestion de collections d'éléments.

[SpaceFrog]

ça commence à ma plaire sérieusement !

beau boulot !

[Bovino]

Merci !
Il y a juste une chose que je ne comprends pas, c'est que ça marche pas avec la balise h1 sous IE
Si quelqu'un a une explication ?

[Bovino]

Bon, j'ai fini par trouver, ce n'était pas lié au h1 mais un problème de haslayer sous IE.
Corrigé en ajoutant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.elt.style.width = this.elt.style.width || this.elt.offsetWidth+'px';

pour IE.

[Bovino]

Suite à une discussion avec Spaffy, voici une nouvelle mise à jour.

Un bug corrigé : la précédente version n'affectait pas la valeur finale de l'opacité à l'élément.
Nouvelle fonctionnalité : possibilité de définir l'élément déclencheur de fading, il suffit pour cela de le passer dans les options (eltOn). Par défaut, c'est l'élément qui subit le fading.

1er post et exemple à jour.

[vermine]

Merci bien.
Je ne me suis jamais vraiment interessé à cela car pour moi c'était à l'époque du chinois.
Ma collègue avait fait un système pour afficher un div de cette manière afin de remplacer les alert en cas de message d'erreur.