Movimiento suave

johnj · #1 (**permalink**) 03/06/2008, 13:19

Saludos amigos,

Como puedo generar un movimiento suave de un elemento?? conozco la forma de hacer que se mueva mediante setInterval o setTimeout pero como puedo hacer para que se genere un moviemiento que al principio sea rapido y al final lento.

De ante mano muchas gracias.

Panino5001 · #2 (**permalink**) 03/06/2008, 23:16

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></title>
<script>
function $(id){
    return document.getElementById(id);
}
function addEvent(obj, evType, fn, useCapture){
 
 if (obj.addEventListener){
    obj.addEventListener(evType, fn, useCapture);
    
  } else if (obj.attachEvent){
    obj.attachEvent("on"+evType, fn);
   
  } else {
   obj['on'+evType]=fn;
  }
}
function easing(prop,fin,tiempo,rozamiento,unidad){
    var _this=this;
    var i=setInterval(
        function(){
            _this.style[prop]=fin-(fin-parseInt(_this.style[prop]))*rozamiento+unidad;
            if(parseInt(_this.style[prop])/fin*100 >= 99.9){
                _this.style[prop]=fin+unidad;
                clearInterval(i);
            }
        },tiempo);
}


window.onload=function(){
    addEvent($('pp'), 'click',function(){easing.call($('pp'),'left',600,3.8,.8,'px');}, false);
}
</script>
</head>

<body>
<img style="cursor:pointer; position:absolute; left:0; top:0" id="pp" src="http://www.forosdelweb.com/customavatars/avatar65984_1.gif" />
</body>
</html>

johnj · #3 (**permalink**) 04/06/2008, 09:50

Muchas Gracias Panino5001 Tu como siempre salvandome la vida. Espero algún día poderte ayudar como tu lo haz hecho conmigo.

Nuevamente Muchas Gracias.

Panino5001 · #4 (**permalink**) 04/06/2008, 10:19

Me alegra que te haya servido