Movimientos agradables

salbatore · #1 (**permalink**) 25/09/2008, 14:25

Hola, foreros!

Tengo un script que aumenta la altura de un div en mi web. El problema es que lo hace de una forma brusca, es decir, comienza y termina a la misma velocidad.

¿Como puedo hacer que cuanto menos quede mas lento aumente su velocidad?

Código PHP:

      var altura = 1;
    var velocidad = 10;

function extender() {
        var objeto = document.getElementById('texto');
        objeto.style.visibility = 'visible';
        altura += velocidad;
        if (!(altura>=150)) {
            objeto.style.height = altura  + 'px';
            window.setTimeout ("extender();", 20);
        }
        
    }

David · #2 (**permalink**) 25/09/2008, 14:27

Aumenta el intervalo del setTimeout() ya que solo le estás poniendo 20 milisegundos entre cada acción.

salbatore · #3 (**permalink**) 03/10/2008, 20:42

Hola de nuevo...

No, jeje... no busco hacer mas rapido el movimiento, lo que quiero es que acelere o decelere, es decir, al principio del movimiento valla a 100 milisigundos y al final a 50, pero de un modo continuo.

¿Como se hace?

Panino5001 · #4 (**permalink**) 04/10/2008, 09:45

Fijate si te sirve algo así:

Código 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>Ejemplo</title>
<script>
function css(propiedad, valor){
    if(!valor)
        return this.style[propiedad];
    this.style[propiedad]=valor;
}
function easing(inicio,fin,coef,propiedad,medida,pausa){
        var tmp=[];
        if(!medida)medida='';
        css.call(this,propiedad,inicio+medida);
        var _this=this;
        this.pausa=pausa;
        var test=0;
        var intervalo=setInterval(
            function(){
                tmp[test]=_this.val;
                if(test>1 && tmp[tmp.length-2]==tmp[tmp.length-1]){
                    _this.val=fin;
                     css.call(_this,propiedad,_this.val+medida);
                     clearInterval(intervalo);
                     return;
                }
                test++;
                document.getElementById('log').innerHTML=test;
                _this.val=parseFloat(css.call(_this,propiedad))+(fin-parseFloat(css.call(_this,propiedad)))*coef;
                css.call(_this,propiedad,_this.val+medida);
            },this.pausa);
}
function $(id){return document.getElementById(id);}
onload=function(){
    easing.call($('pp'),10,400,.09,'width','px',10);
    easing.call($('pp'),10,400,.09,'height','px',10);
}
</script>
</head>
<body>
<div id="pp" style=" background-color:orange; color:#FFF; display:block; ">fffffff</div>
<div id="log"></div>
</body>
</html>

salbatore · #5 (**permalink**) 05/10/2008, 17:08

Hola, Panino5001...

Muchas gracias!... es exactamente lo que buscaba...

Perfecto!.