Ingrandimento "smooth" freeza il browser

[lyllo]

buondì.

sto creando un menu composto da immagini 40x40.
al mouseover le vorrei far ingrandire "dolcemente" ed al mouseout le voglio far ridurre.

var ingrandisci = function(id){
	imm = document.getElementById(id);
	h = imm.style.height.split("px");
	hgt = parseInt(h[0]);
	hgt += 5;
	if(hgt <= 100){
		imm.style.height = hgt+"px";
		setInterval(function () {ingrandisci(id);},30);
		} 
}


var riduci = function(id){
	imm = document.getElementById(id);
	h = imm.style.height.split("px");
	hgt = parseInt(h[0]);
	hgt -= 5;
	if(hgt >= 40){
		imm.style.height = hgt+"px";
		setInterval(function () {riduci(id);},30);
		} 
}

in questo modo non va
gli eventi che triggerano le funzioni sono:

... id='imm_menu_1' onmouseover="ingrandisci('imm_menu_1')" onmouseout="riduci('imm_menu_1')" />
...
... id='imm_menu_1' onmouseover="ingrandisci('imm_menu_2')" onmouseout="riduci('imm_menu_2')" />
...
//etc...

il fato è che se metto il mouse sopra l'immagine invece di ingrandirsi inizia a tremolare, in FF si impalla del tutto il browser, in IE inizia ad espandersi/ridursi senza sosta.

mi sapete dare un'idea?

grazie.

[whisher]

Hai guardato cosa c'è in

h = imm.style.height.split("px");
alert(h); 

Imho sarebbe meglio recuperare
height non tramite id
ma tramite this cioè

ingrandisci(this) 

[whisher]

Metti il var davanti alle variabili
se non metti il var sono globali
che non è bello

[whisher]

Devi anche utilizzare
https://developer.mozilla.org/en/DOM....clearInterval per cancellare il ripetimento
della azione e intercettare l'altro evento (quando il mouse è over devi bloccare l'azione out e viceversa).

[lyllo]

intanto, come premessa: in risposta alla tua domanda, il check su "h" l'avevo già fatto e l'altezza dell'attributo style è prelevato correttamente.
tant'è che se non creo la funzione "riduci" il comportamento è perfetto.

var ingrandisci = function(id){
	var	imm = document.getElementById(id);
	var h = imm.style.height.split("px");
	var hgt = parseInt(h[0]);
	hgt += 5;
	if(hgt <= 100){
		imm.style.height = hgt+"px";
		setInterval(function () {ingrandisci(id);},30);
		} 
	else window.clearInterval();
} 


var riduci = function(id){
	var imm = document.getElementById(id);
	var h = imm.style.height.split("px");
	var hgt = parseInt(h[0]);
	hgt -= 5;
	if(hgt >= 40){
		imm.style.height = hgt+"px";
		setInterval(function () {riduci(id);},30);
		} 
	else window.clearInterval();		
}

questo è il codice come ho iniziato a modificarlo, solo che continua ad impallarmi tutto

grazie e

[whisher]

window.clearInterval(); 

https://developer.mozilla.org/en/DOM/window.setInterval

Guarda la sintassi e la logica

solo che continua ad impallarmi tutto

Quando il mouse è over devi bloccare l'azione out e viceversa
(tramite intervalID)

[lyllo]

modificato come segue.
sembra non impallarsi più.
il punto che ora rimane oscuro è: perchè onmouseout, NON si restringe e rimane "massimizzata"?

...
var intervalID_I;
var intervalID_R;

var ingrandisci = function(id){
	clearInterval(intervalID_R);
	var	imm = document.getElementById(id);
	var h = imm.style.height.split("px");
	var hgt = parseInt(h[0]);
	hgt += 5;
	if(hgt <= 100){
		imm.style.height = hgt+"px";
		intervalID_I = setInterval(function () {ingrandisci(id);},30);
		} 

} 


var riduci = function(id){
	clearInterval(intervalID_I);
	var imm = document.getElementById(id);
	var h = imm.style.height.split("px");
	var hgt = parseInt(h[0]);
	hgt -= 5;
	if(hgt >= 40){
		imm.style.height = hgt+"px";
		intervalID_R = setInterval(function () {riduci(id);},30);
		} 
		
}

[whisher]

il punto che ora rimane oscuro è: perchè onmouseout, NON si restringe e rimane "massimizzata"?

Devi far richiamare a ingrandisci/riduci
non loro stesse ma una funziona ad hoc
anche privata.

Dai un occhio
http://www.sitepoint.com/forums/show...highlight=fade

[lyllo]

ho provato a modificare il codice copiandoti:

function setSize(el,value) {
    el.style.height = value+"px";
}
 
function ridimensiona(opt,id){
	imm = document.getElementById(id);
	hgt = document.getElementById(id).style.height.split("px");
	h = hgt[0];
	if(opt == 'max') var stop= 100;
	if(opt == 'min') var stop= 40;
    var timeoutID = window.setInterval(f, 10);
    function f(){ 
		if(opt == 'max'){  
	        if(h<stop){
	            h += 1;
	            setSize(imm,h);
	        	}
	        else {
	             window.clearTimeout(timeoutID);
	        	}
	    	}
		if(opt == 'min'){  
	        if(h>stop){
	            h -= 5;
	            setSize(imm,h);
	        	}
	        else {
	            window.clearTimeout(timeoutID);
	        	}
	    	}	    	
    }
}

...
...
...
... onmouseover="ridimensiona('max','imm_menu_1')" onmouseout="ridimensiona('min','imm_menu_1')" />...

1) l'ingrandimento viene SPARATO ed è istantaneo, mentre la riduzione è fluida come dovrebbe.
2) invece di fermarsi a 100 l'immagine viene ingrandita!

mi puoi aiutare?

[whisher]

Prova questa che tra le altre cose
fa un uso non intrusivo di js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    
<script type="text/javascript">

var timeoutIdIncrease;
var timeoutIdDecrease;
function setHeight(el,max){ 
    el.height= max;
} 
function increase(){ 
    var h= this.height; 
    var stop= 100;
    if(typeof timeoutIdDecrease != 'undefined'){
        clearTimeout(timeoutIdDecrease);    
    } 
    timeoutIdIncrease = setInterval(f, 50); 
    var self= this; 
    function f(){     
        if(h<stop){ 
            h++; 
            setHeight(self,h); 
        } 
        else { 
            clearTimeout(timeoutIdIncrease); 
        } 
    } 
} 
function decrease(){ 
    var h= this.height; 
    var stop= 40; 
    if(typeof timeoutIdIncrease != 'undefined'){
        clearTimeout(timeoutIdIncrease);    
    } 
    var timeoutIdDecrease = setInterval(f, 50); 
    var self= this; 
    function f(){     
        if(h>stop){ 
            h--; 
            setHeight(self,h); 
        } 
        else { 
            clearTimeout(timeoutIdDecrease); 
        } 
    } 
} 
window.onload= function(){ 
    var imgs= document.getElementById('menu').getElementsByTagName('img'); 
    var length= imgs.length;
    for(var i= 0; i<length; i++){
        imgs[i].onmouseover=increase; 
        imgs[i].onmouseout=decrease;
    }
}

</script>
    <title>Untitled 3</title>
</head>

<body>


<div id="menu">
[img]woo.gif[/img] [img]woo.gif[/img] [img]woo.gif[/img] 
</div>
</body>
</html> 

le dimensioni di woo.gif sono 40x40