Rallentare esecuzione dello script

khendall

Rallentare esecuzione dello script

Salve a tutti, stavo facendo qualche esperimento, cioè, allungare un div al clik dell'utente, ma purtroppo si apre di botto, non saprei come rallentare, ho provato la funzione setTimeout() ma non riesco, mi dà un'errore che non riesco ad individuare..

il codice è questo:

[PHP]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prova</title>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
</head>
<body>
<div id="centro"><a onclick="allunga('centro')">centro</a></div>
</body>
</html>[/PHP]

chi mi dà una mano a capire? grazie ^^

claudioweb

Ciao

Prova a fare qualcosa del genere:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prova</title>
<script type="text/javascript">
<!--

var altezza = 15;
var pixel = 300;

var x=altezza;
var aperto = 0;

function avvio(id){
    nome = id;
    if (x >= pixel){
    chiudi(nome);
    }
    if (x == altezza){
    apri(nome);
    }
}
function apri(id){
    var box = document.getElementById(id); 
    box.style.height=x+"px";
    x++;
    
    if (x >= pixel)
    return;
    
    setTimeout('apri("centro")',10);
}
function chiudi(id){
    var box = document.getElementById(id); 
    box.style.height=x+"px";
    x--;

    if (x <= altezza)
    return;

    setTimeout('chiudi("centro")',10);
}
//-->
</script> 
<style type="text/css">
<!--
#centro {
width: 500px;
margin-right: auto;
margin-left: auto;
border: thin solid #EAEAEA;
background-color: #393939;
color: #F9F9F9;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 5px;
}
-->
</style>
</head>
<body>
<div id="centro" name="centro"><a href="javascript:void(0);" onclick="avvio('centro')">apri e chiudi</a></div> 
</body>
</html>

whisher

Prova questo fresco fresco

[PHP]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prova</title>
<style type="text/css">
#centro {
width: 500px;
/* START */
height:50px;
line-height:50px;
margin:0px auto;
border: thin solid #EAEAEA;
background-color: #393939;
color: #F9F9F9;
text-align: center;
}
</style>
<script type="text/javascript">
function allunga(start,stop,speed,el){
var startHeight= start;
var stopHeight= stop;
var timeoutID = window.setInterval(f, speed);
var self= el;
function f(){
if(stop>start){
start++;
var tmp= start;
self.style.height= tmp+'px';
}
else {
window.clearTimeout(timeoutID);
}
}
}
</script>
</head>
<body>
<div id="centro">
<a onclick="allunga(50,300,10,this.parentNode)">centro</a>
</div>
</body>
</html>
[/PHP]