Animate como en jQuery

[pato12]

Hola,
Como se puede hacer un animate como el de jQuery o el del FBJS (javasript de facebook).
Se que es dificil, estuve muchos dias intentando sacarle al jquery su animate pero no puede
Gracias
Salu2

[ssclamp]

Pon un enlace para ver de qué hablas.

Saludos

[Panino5001]

Quizá te sirva leer esto: http://www.disegnocentell.com.ar/notas2.php?id=239

[pato12]

Gracias!
Ahora me pongo a hacerlo (:

[pato12]

Hola,
Este es mi codigo del animate:

Código javascript:

transicionAnimate:function(curva,ms,callback){
    this.ant=0.01;
    this.done_=false;
    var _this=this;
    this.start=new Date().getTime();
    this.init=function(){
        setTimeout(function(){
                if(!_this.next()){
                    callback(1);
                    _this.done_=true;
                    window.globalIntervalo=0;
                    return;
                }
                callback(_this.next());
                _this.init();
            },13);
    }
    this.next=function(){
        var now=new Date().getTime();
        if((now-this.start)>ms)
            return false;
        return this.ant=curva((now-this.start+.001)/ms,this.ant);
    }
},
senoidal:function(p,ant){return (1 - Math.cos(p * Math.PI)) / 2;},
fxAnimate:function(obj,efectos,ms,cola,curva){
    if(!window.globalIntervalo)
        window.globalIntervalo=1;
        else{
            if(cola)
                return setTimeout(function(){this.fxAnimate(obj,efectos,ms,cola,curva)},30);
            else
                return;
    }   
    var t=new this.transicionAnimate(
    curva,ms,function(p){
        for(at in efectos){
            if(efectos[at]<obj.css(at)){
                var delta=obj.css(at)-efectos[at];
                obj.css(at,(obj.css(at)-(p*delta)));
            }else{
                var delta=efectos[at]-obj.css(at);
                obj.css(at,(obj.css(at)+(p*delta)));
            }
        }
    });
    t.init();
    t=null;
},
animate:function(op,time){this.fxAnimate(this,op,time,true,this.senoidal);}
 

Pero no anda bin :(
Me lo hace muy grande (miles de veses mas) y resien al fina me lo hace del tamaño que le di.
Gracias
Salu2
PD: css() es una funcion parecida a jquey.

{EDITO}
Aqui esta el link de una demo:
http://halfmusic.com.ar/animate.html

[pato12]

Bueno termine el animate.
Les dejo el link para que vean y el codigo:
http://halfmusic.com.ar/animate-finisch.html

Código javascript:

<script>
var transicionAnimate=function(curva,ms,callback,onDone){
    this.ant=0.01;this.done_=false;var _this=this;this.start=new Date().getTime();this.init=function(){
    setTimeout(function(){
        if(!_this.next()){
        callback(1);_this.done_=true;(onDone?onDone():function(){
        }
        );window.globalIntervalo=0;return;}
        callback(_this.next());_this.init();
    },13);};
    this.next=function(){
        var now=new Date().getTime();if((now-this.start)>ms)return false;return this.ant=curva((now-this.start+.001)/ms,this.ant);}
}
var senoidal=function(p,ant){return (1 - Math.cos(p * Math.PI)) / 2;}
var fxAnimate=function(obj,efectos,ms,cola,curva,inicio,onDone){
    _this=this;
    if(!window.globalIntervalo)
        window.globalIntervalo=1;
    else{
        if(cola)
            return setTimeout(function(){_this.fxAnimate(obj,efectos,ms,cola,curva,inicio,onDone)},30);
        else
            return;
    }
    var t=new this.transicionAnimate(curva,ms,function(p){
    for(at in efectos){
        if(efectos[at]<inicio[at]){
            var delta=parseInt(inicio[at]-efectos[at]);
            if(at=="opacity"){
                obj.style.opacity=(parseInt(inicio[at]-parseInt(p*delta)));
                obj.style.MozOpacity=(parseInt(inicio[at])-parseInt(p*delta));
                obj.style.KhtmlOpacity=(parseInt(inicio[at])-parseInt(p*delta));
                obj.style.filter="alpha(opacity="+(parseInt(inicio[at])-parseInt(p*delta))*100+")";
                obj.style.zoom=1;
            }else{
                obj.style[at] = (parseInt(inicio[at])-parseInt(p*delta));
            }
        }else{
            var delta=parseInt(efectos[at]-inicio[at]);
            if(at=="opacity"){
                obj.style.opacity=(parseInt(inicio[at])+parseInt(p*delta));
                obj.style.MozOpacity=(parseInt(inicio[at])+parseInt(p*delta));
                obj.style.KhtmlOpacity=(parseInt(inicio[at])+parseInt(p*delta));
                obj.style.filter="alpha(opacity="+(parseInt(inicio[at])+parseInt(p*delta))*100+")";
                obj.style.zoom=1;
            }else{
                obj.style[at] = (parseInt(inicio[at])+parseInt(p*delta));
            }
        }
    }
    },onDone);t.init();t=null;
}
var animate=function(_this,op,time,onDone){time=!time?200:time;inicia={};for(at in op){inicia[at]=_this.style[at].replace('px','');}this.fxAnimate(_this,op,time,true,senoidal,inicia,onDone);}
function animar(_this){
    animate(_this,{'height':50,'width':100,'opacity':0.5},null,function(){alert('Fin!');});
}
</script>
<div style="height:200px; width:300px; background-color:#006699;opacity:1;" onClick="animar(this);">Click para animar!</div>
 

Gracias
Salu2
PD: No anda el opacity. Si alguien sabe como hacerlo andar, por favor digalo (:

[pato12]

Nadie sabe como solucionar el problema del opacity?

[ssclamp]

Mira si esto te ayuda para el código de la transparencia:

http://www.box.net/shared/hmyizyxxct

Saludos

[pato12]

El codigo que hace la trasparencia anda bien, lo que anda mal es que me deja siempre 1 o 0, nunca 0.5 o otros.
Gracias
Salu2