Ecco un effetto slide per javascript.

Premetto che è una cosa fatta un po’ così, proprio per non rivolgersi a un framework JS.

Dico subito che questo script ha dei limiti e cioè funziona solo con elementi dalla proprietà CSS (dichiarata o nativa non fa differenza) display: block.

Il secondo limite è che per farlo funzionare in modalità di far vedere serve che l’altezza sia fissata (oppure, visto che la fissa, che sia stato chiuso con questa funzione).

L’ho testato su Firefox e Chromium e funziona ma non so dirvi per altri browser.

Comunque da questo script si può anche creare un fade (è proprio da lì che l’ho creato, infatti tempo fa ho fatto uno script simile a bobu) usando opacity al posto di height.

Ma veniamo allo script:

function vdfn_slide(div, mov, timeFrame) {
	timeFrame=typeof(timeFrame)=='undefined' ? 33 : timeFrame;
	if(mov=='show') {
		total=div.style.height;
		onlynumber=total.length>2 ? total.length-2 : total.length;
		onlynumber=total.substr(0, onlynumber)
		timeout=(onlynumber/5+1)*timeFrame;
		original_overflow=div.style.overflow;
		div.style.overflow='hidden';
		div.style.height='0px';
		div.style.display='block';
		slideIteratiion=0;
		slideInterval=window.setInterval(function() {
			newheight=5*slideIteratiion;
			div.style.height=''+newheight+'px';
			slideIteratiion++;
		}, timeFrame);
		window.setTimeout(function() {
			window.clearInterval(slideInterval);
			div.style.overflow=original_overflow;
			div.style.height=total;
		}, timeout);
	} else {
		total=div.offsetHeight+0;
		timeout=(total/5+1)*timeFrame;
		slideIteratiion=0;
		original_overflow=div.style.overflow;
		div.style.overflow='hidden';
		slideInterval=window.setInterval(function() {
			newheight=total-5*slideIteratiion;
			newheight=newheight<0 ? 0 : newheight;
			div.style.height=''+newheight+'px';
			slideIteratiion++;
		}, timeFrame);
		window.setTimeout(function() {
			window.clearInterval(slideInterval);
			div.style.display='none';
			div.style.overflow=original_overflow;
			div.style.height=''+total+'px';
		}, timeout);
	}
}

In pratica ogni timeFrame millisecondi aggiunge (o rimuove) 5 px di altezza. … [Leggi il resto]