Bien le bonjour.

Toujours dans l'optique de me créer un script assez complet qui pourra subvenir à mes besoins javascriptiens sans passer par une librairie, J'ai commencé ma classe par un système de Fadeup (se masquant par le haut).

J'ai pleins d'idées pour continuer (Ajout de variations par vitesses, oscillations... Et aussi d'autres modes de manipulations. Cela dit, avant d'aller plus loin, je vais profiter des gentils membres très calés en javascript sur ce forum.

Qu'est ce qui ne va pas dans ce code, comment pourrais je l'optimiser, le réduire ? Autant prendre les bonnes habitudes dés le début.

function Fade(el, hide, show, speed) {
    this.id = document.getElementById(el);
    this.speed = speed;
	this.height = this.id.offsetHeight;
	this.fadeuphide = function() {
		if(this.id.offsetHeight > 0) {
			this.id.style.height = (this.id.offsetHeight - 2) +'px';
			var it = this;
			setTimeout(function() { it.fadeuphide(); }, this.speed);
		} 
	};
	this.fadeupshow = function () {
		if(this.id.offsetHeight <= this.height) {
			this.id.style.height = (this.id.offsetHeight + 2) +'px';
			var it = this;
			setTimeout(function () { it.fadeupshow(); }, this.speed);
		}
	};
	this.hide = document.getElementById(hide);
	this.show = document.getElementById(show);
	var that = this;
	addEvent(that.hide, 'click', function(e) {
		that.fadeuphide();
		e.returnValue = false;
		if (e.preventDefault) e.preventDefault();
	});
	addEvent(that.show, 'click', function(e) {
		that.fadeupshow();
		e.returnValue = false;
		if (e.preventDefault) e.preventDefault();
	});
}

Ce qui permet de créer l'animation sur un bloc avec un bout de code comme ça :

<div id="bulle">
</div>
<a id="remonter" href="#">Remonter</a> - <a href="#" id="derouler">Dérouler</a>
<script type="text/javascript" src="fadeout.js"></script>
<script type="text/javascript">
var bulle = new Fade('bulle', 'remonter', 'derouler', 10);
</script>

J'attends avec grattitude vos remarques.

Ceci fonctionne sur tous les navigateurs ?

Pas testé sur safari, mais y'a pas de raisons. Et sur les autres oui, et ie >= 7. J'ai pas testé le 6

Ca a plutôt une bonne tête.

fadeupshow et 'autre methodes pourraient etre mises sur le prototype il me semble.

Qu'est ce que ça change exactement ?

Bah au lieu de creer une fois la fonction par instance, ca la cree qu'une fois donc moins de memoire...

function C( ) {
    this.m = function ( ) { };
}
var o1 = new C( );
var o2 = new C( );
console.log( o1.m === o2.m );// false

function C( ) { }
C.prototype.m = function ( ) { };
var o1 = new C( );
var o2 = new C( );
console.log( o1.m === o2.m );// true

Okay c'est fais.

Arrêtez moi si je me trompe, mais un bloc en display: none fera toujours 0 en width et height, ou y'a un moyen de connaitre ses dimensions quand il est masqué ?

Non, tant qu'il est en display:none, tu ne peux connaître ses dimensions réelles.

Ok, donc ce n'est pas possible de charger une page avec un bloc masqué puis de le dérouler, sans l'avoir enroulé précédemment... grlhmm...

Il y a des techniques de ninja en le mettant en dehors de l'ecran ou en visibility:none qui permettent de le voir sans l'afficher.
Par contre, en visibility:none, il prend la palce donc il faut aussi changer son display en ablsolute pour eviter ca et du coup, t'as pas forcement les vraies dimmensions.

Citation : xavierm02

Il y a des techniques de ninja .

J'y ai pensé en plus Mais bon je trouve que c'est un peu chasser la mouche au bazooka.