Newsgroup: it.comp.lang.javascript
Titolo: moofx + fade, due effetti in una pagina (newbe-lunghetto)

Salve a tutti,
mi ritrovo a dover utilizzare due script per ottenere due effetti in
una pagina web:
- il primo utilizza moofx e lo uso per gli ormai diffusissimi pannelli
a scomparsa che si trovano a inizio pagina (vedi es.
http://techfoolery.com
 o l'italiano 
http://tomstardust.com
)
- il secondo utilizza uno scrit fade.js basato sul codice di
http://www.couloir.org/
  e riadattato da
http://www.clagnut.com/blog/1299/
 per ottenere un effetto fade sul
caricamento di immagini corredato anche da un immaginetta di loading
stile web2.0
Bene il problema è che Stranamente (mai successo prima) su explorer
tutto funziona normalmente,mentre in firefox.. il pannello a scomparsa
non è fluido ma va a scatti, cioè si apre e si chiude con molta
difficoltà. Se non inserisco l'effetto fade il pannello torna a
funzionare in maniera fluida.
La situazione della mia pagina tralasciando l'inutile è piu o meno
questa:
<title>pagina prova</title>
<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/moo.fx.js"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script src="js/pannello.js" type="text/javascript"></script>
<script type="js/fade.js"></script>
<div id="pannello">
     <div id="contenuto-pannello">
      </div>
</div>
<div id="container">
       <div id="grande">
       </div>
</div>
Questo il contenuto dello script pannello.js
 var opened=false;
    window.onload = function() {
        resizeDivHeight = new fx.Height('pannello',{duration:2000});
    };
    function toggelopen(){
        if(opened==false){
            resizeDivHeight.custom(0,200);//First Number is starting
height, Second is ending height.
            opened=true;
        }else{
            resizeDivHeight.custom(200,0);//First Number is starting
height, Second is ending height.
            opened=false;
        }
    }
E questo il contenuto dello script fade.js
/*
Better(?) Image fader (C)2004 Patrick H. Lauke aka redux
Inspired by Richard Rutter / Clagnut 
http://www.clagnut.com/blog/1299/
Original concept and code adapted from Couloir 
http://www.couloir.org/
preInit "Scheduler" idea by Cameron Adams aka The Man in Blue
http://www.themaninblue.com/writing/perspective/2004/09/29/
*/
/* general variables */
var fadeTargetId = 'grande'; /* change this to the ID of the fadeable
object */
var	fadeTarget;
var preInitTimer;
preInit();
/* functions */
function preInit() {
	/* an inspired kludge that - in most cases - manages to initially hide
the image
	   before even onload is triggered (at which point it's normally too
late, and a nasty flash
	   occurs with non-cached images) */
	if
((document.getElementById)&&(fadeTarget=document.getElementById(fadeTargetId)))
{
		fadeTarget.style.visibility = "hidden";
		if (typeof preInitTimer != 'undefined') clearTimeout(preInitTimer);
/* thanks to Steve Clay 
http://mrclay.org/
 for this small Opera fix */
	} else {
		preInitTimer = setTimeout("preInit()",1);
	}
}
function fadeInit() {
	if (document.getElementById) {
		/* get a handle on the fadeable object, to make code later more
manageable */
		preInit(); /* shouldn't be necessary, but IE can sometimes get ahead
of itself and trigger fadeInit first */
		/* set the initial opacity in a (hopefully) cross browser way
		   notice that because of the way the image is in front, and not
obfuscated
		   by another object we need to "fade out", i don't need a fallback
mechanism
		   to show/hide the covering object...the image is just there, full
stop */
		if (fadeTarget.style.MozOpacity!=null) {
			/* Mozilla's pre-CSS3 proprietary rule */
			fadeTarget.style.MozOpacity = 0;
		} else if (fadeTarget.style.opacity!=null) {
			/* CSS3 compatible */
			fadeTarget.style.opacity = 0;
		} else if (fadeTarget.style.filter!=null) {
			/* IE's proprietary filter */
			fadeTarget.style.filter = "alpha(opacity=0)";
		}
		/* make the object visible again */
		fadeTarget.style.visibility = 'visible';
		window.setTimeout("fadeIn(0)", 500);
	}
}
function fadeIn(opacity) {
	if (fadeTarget) {
		if (opacity <= 100) {
			if (fadeTarget.style.MozOpacity!=null) {
				/* Mozilla's pre-CSS3 proprietary rule */
				fadeTarget.style.MozOpacity = (opacity/100)-.001;
				/* the .001 fixes a glitch in the opacity calculation which
normally results in a flash when reaching 1 */
			} else if (fadeTarget.style.opacity!=null) {
				/* CSS3 compatible */
				fadeTarget.style.opacity = (opacity/100)-.001;
			} else if (fadeTarget.style.filter!=null) {
				/* IE's proprietary filter */
				fadeTarget.style.filter = "alpha(opacity="+opacity+")";
				/* worth noting: IE's opacity needs values in a range of 0-100, not
0.0 - 1.0 */
			}
			opacity += 10;
			window.setTimeout("fadeIn("+opacity+")", 30);
		}
	}
}
/* initialise fader by hiding image object first */
addEvent (window,'load',fadeInit)
/* 3rd party helper functions */
/* addEvent handler for IE and other browsers */
function addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+,  NS6 and Mozilla
// By Scott Andrew
{
 if (elm.addEventListener){
   elm.addEventListener(evType, fn, useCapture);
   return true;
 } else if (elm.attachEvent){
   var r = elm.attachEvent("on"+evType, fn);
   return r;
 }
}
------------
Su explorer tutto fila liscio... su firefox pannello scattoso.. mi date
una mano?
Grazie e perdonate la lunghezza

 <script type="js/fade.js"></script>
C'è troppa roba di terze parti per poter analizzare bene il quadro generale,
almeno da me che non uso nulla di tutto ciò e quindi non lo conosco. Ed è
troppa, perché mi metta ad analizzarla tutta.
L'impressione che ho da quel che mi dici, è che ci siano più di un
timeout/interval che si accavallano tra di loro, e che creano l'effetto a
scatti. I timeout/interval non sono altri thread, quindi vanno ad
appesantire il processo principale. Vanno usati col contagocce. E'
preferibile piuttosto legare a un timeout/interval più azioni, piuttosto che
crearne diversi.
Se ne è parlato anche in questo NG, tempo fa, sul come rendere più fluide le
animazioni.
Potrebbe anche essere qualcos'altro, comunque, non avendo visto l'errore
replicato.
-- 
~ Non esistono donne brutte. Dipende solo da quanta vodka bevi.
(proverbio russo)