Velocidad Opacity en imagen

[B031]

Pues e estado buscando x google y muchos sitios y nada, no encontre nada, y lo k encontre no me sirivio, pues bien, lo que quiero hacer sk cuando este la imagen normal tengo un 40 de opacidad y cuando se ponga el puntero encima, k no tenga
para esto utiizo este codigo en la imagen:

Código:

style="-moz-opacity:0.4;filter:alpha(opacity=40);
onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40"

Pero el cambio es de golpe, asik keria saber como hacer el cambio mas despacio, no se si me explico.

Gracias!

[MaBoRaK]

loading.........

Abajo la explain.

connection closed.

[MaBoRaK]

loading.........

No es asi de simple amigo. Debes usar ecuaciones de tiempo y valor.

http://www.robertpenner.com/easing/

Mira, te paso lo que yo hago. para hacer fade uso el algoritmo "sineout"

Código PHP:

  leimnud.Package.Public({ 
    info    :{ 
        Class    :"maborak", 
        File    :"module.fx.js", 
        Name    :"fx", 
        Type    :"module", 
        Version    :"0.1" 
    }, 
    content    :{ 
        algorithm:function() 
        { 
            this.make=function(options) 
            { 
                this.options = { 
                    transition    : "sineInOut", 
                    duration    : 2000, 
                    fps            : 70, 
                    onTransition: function(){}, 
                    onFinish    : function(){}, 
                    begin        : 0, 
                    end            : 100, 
                    timeBegin    : new Date().getTime() 
                }.concat(options || {}); 
                this.timer    = setInterval(function(){ 
                    var time = new Date().getTime(); 
                    if (time < this.options.timeBegin + this.options.duration) 
                    { 
                        this.cTime    = time - this.options.timeBegin; 
                        if(this.options.begin.isArray) 
                        { 
                            this.result        = []; 
                            for(var i=0;i<this.options.begin.length;i++) 
                            { 
                                this.result.push(this.transitions[this.options.transition](this.cTime, this.options.begin[i], (this.options.end[i] - this.options.begin[i]), this.options.duration,0,0)); 
                            } 
                        } 
                        else 
                        { 
                            this.result    = this.transitions[this.options.transition](this.cTime, this.options.begin, (this.options.end - this.options.begin), this.options.duration,0,0); 
                        } 
                        return this.options.onTransition(this); 
                    } 
                    else 
                    { 
                        this.timer = clearInterval(this.timer); 
                        return this.options.onFinish(this); 
                    } 
                }.extend(this),Math.round(1000/this.options.fps)); 
            }; 
            this.transitions = { 
 
                /* Property: linear */ 
                /* cTime, from, (to - from),duration */ 
                linear: function(t, b, c, d){ 
                    return c*t/d + b; 
                }, 
 
                /* Property: quadIn */ 
                quadIn: function(t, b, c, d){ 
                    return c*(t/=d)*t + b; 
                }, 
 
                /* Property: quatOut */ 
                quadOut: function(t, b, c, d){ 
                    return -c *(t/=d)*(t-2) + b; 
                }, 
 
                /* Property: quadInOut */ 
                quadInOut: function(t, b, c, d){ 
                    if ((t/=d/2) < 1) return c/2*t*t + b; 
                    return -c/2 * ((--t)*(t-2) - 1) + b; 
                }, 
 
                /* Property: cubicIn */ 
                cubicIn: function(t, b, c, d){ 
                    return c*(t/=d)*t*t + b; 
                }, 
 
                /* Property: cubicOut */ 
                cubicOut: function(t, b, c, d){ 
                    return c*((t=t/d-1)*t*t + 1) + b; 
                }, 
 
                /* Property: cubicInOut */ 
                cubicInOut: function(t, b, c, d){ 
                    if ((t/=d/2) < 1) return c/2*t*t*t + b; 
                    return c/2*((t-=2)*t*t + 2) + b; 
                }, 
 
                /* Property: quartIn */ 
                quartIn: function(t, b, c, d){ 
                    return c*(t/=d)*t*t*t + b; 
                }, 
 
                /* Property: quartOut */ 
                quartOut: function(t, b, c, d){ 
                    return -c * ((t=t/d-1)*t*t*t - 1) + b; 
                }, 
 
                /* Property: quartInOut */ 
                quartInOut: function(t, b, c, d){ 
                    if ((t/=d/2) < 1) return c/2*t*t*t*t + b; 
                    return -c/2 * ((t-=2)*t*t*t - 2) + b; 
                }, 
 
                /* Property: quintIn */ 
                quintIn: function(t, b, c, d){ 
                    return c*(t/=d)*t*t*t*t + b; 
                }, 
 
                /* Property: quintOut */ 
                quintOut: function(t, b, c, d){ 
                    return c*((t=t/d-1)*t*t*t*t + 1) + b; 
                }, 
 
                /* Property: quintInOut */ 
                quintInOut: function(t, b, c, d){ 
                    if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; 
                    return c/2*((t-=2)*t*t*t*t + 2) + b; 
                }, 
 
                /* Property: sineIn */ 
                sineIn: function(t, b, c, d){ 
                    return -c * Math.cos(t/d * (Math.PI/2)) + c + b; 
                }, 
 
                /* Property: sineOut */ 
                sineOut: function(t, b, c, d){ 
                    return c * Math.sin(t/d * (Math.PI/2)) + b; 
                }, 
 
                /* Property: sineInOut */ 
                sineInOut: function(t, b, c, d){ 
                    return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; 
                }, 
 
                /* Property: expoIn */ 
                expoIn: function(t, b, c, d){ 
                    return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; 
                }, 
 
                /* Property: expoOut */ 
                expoOut: function(t, b, c, d){ 
                    return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; 
                }, 
 
                /* Property: expoInOut */ 
                expoInOut: function(t, b, c, d){ 
                    if (t==0) return b; 
                    if (t==d) return b+c; 
                    if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; 
                    return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; 
                }, 
 
                /* Property: circIn */ 
                circIn: function(t, b, c, d){ 
                    return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; 
                }, 
 
                /* Property: circOut */ 
                circOut: function(t, b, c, d){ 
                    return c * Math.sqrt(1 - (t=t/d-1)*t) + b; 
                }, 
 
                /* Property: circInOut */ 
                circInOut: function(t, b, c, d){ 
                    if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; 
                    return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; 
                }, 
 
                /* Property: elasticIn */ 
                elasticIn: function(t, b, c, d, a, p){ 
                    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3; if (!a) a = 1; 
                    if (a < Math.abs(c)){ a=c; var s=p/4; } 
                    else var s = p/(2*Math.PI) * Math.asin(c/a); 
                    return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 
                }, 
 
                /* Property: elasticOut */ 
                elasticOut: function(t, b, c, d, a, p){ 
                    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3; if (!a) a = 1; 
                    if (a < Math.abs(c)){ a=c; var s=p/4; } 
                    else var s = p/(2*Math.PI) * Math.asin(c/a); 
                    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; 
                }, 
 
                /* Property: elasticInOut */ 
                elasticInOut: function(t, b, c, d, a, p){ 
                    if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5); if (!a) a = 1; 
                    if (a < Math.abs(c)){ a=c; var s=p/4; } 
                    else var s = p/(2*Math.PI) * Math.asin(c/a); 
                    if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 
                    return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; 
                }, 
 
                /* Property: backIn */ 
                backIn: function(t, b, c, d, s){ 
                    if (!s) s = 1.70158; 
                    return c*(t/=d)*t*((s+1)*t - s) + b; 
                }, 
 
                /* Property: backOut */ 
                backOut: function(t, b, c, d, s){ 
                    if (!s) s = 1.70158; 
                    return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; 
                }, 
 
                /* Property: backInOut */ 
                backInOut: function(t, b, c, d, s){ 
                    if (!s) s = 1.70158; 
                    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; 
                    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; 
                }, 
 
                /* Property: bounceIn */ 
                bounceIn: function(t, b, c, d){ 
                    return c - this.transitions.bounceOut (d-t, 0, c, d) + b; 
                }, 
 
                /* Property: bounceOut */ 
                bounceOut: function(t, b, c, d){ 
                    if ((t/=d) < (1/2.75)){ 
                        return c*(7.5625*t*t) + b; 
                    } else if (t < (2/2.75)){ 
                        return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 
                    } else if (t < (2.5/2.75)){ 
                        return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 
                    } else { 
                        return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 
                    } 
                }, 
 
                /* Property: bounceInOut */ 
                bounceInOut: function(t, b, c, d){ 
                    if (t < d/2) return this.transitions.bounceIn(t*2, 0, c, d) * .5 + b; 
                    return this.transitions.bounceOut(t*2-d, 0, c, d) * .5 + c*.5 + b; 
                } 
 
            }.expand(this); 
            this.expand(this); 
        }, 
        fade:function() 
        { 
            this.make=function(options) 
            { 
                this.options = { 
                    duration: 1000, 
                    transition:"sineInOut", 
                    end    : 0, 
                    onFinish:function(){} 
                }.concat(options); 
                this.dom = ((this.options.dom || []).isArray)?this.options.dom:[this.options.dom]; 
                for(var i=0;i<this.dom.length;i++) 
                { 
                    of     = (i==(this.dom.length-1))?this.options.onFinish:function(){}; 
                    new this.parent.module.fx.algorithm().make({ 
                        duration     : this.options.duration, 
                        end            : this.options.end, 
                        transition    : this.options.transition, 
                        begin         : this.parent.dom.getOpacity(this.dom[i]), 
                        onTransition    : function(fx,dom){ 
                            this.parent.dom.opacity(dom,fx.result*100); 
                        }.extend(this,this.dom[i]), 
                        onFinish:function(fx,dom,finish) 
                        { 
                            this.parent.dom.opacity(dom,this.options.end*100); 
                            return finish(); 
                        }.extend(this,this.dom[i],of) 
                    }); 
                } 
                this.expand(this); 
            }; 
        }, 
        move:function() 
        { 
            this.make=function(options) 
            { 
                this.options = { 
                    duration: 1000, 
                    transition:"sineInOut", 
                    end    : 0, 
                    onFinish:function(){} 
                }.concat(options); 
                this.dom = this.options.dom; 
                new this.parent.module.fx.algorithm().make({ 
                    duration     : this.options.duration, 
                    end        : [this.options.end.x,this.options.end.y], 
                    transition    : this.options.transition, 
                    begin         : [parseInt(this.dom.style.left),parseInt(this.dom.style.top)], 
                    onTransition    : function(fx,dom){ 
                        this.dom.style.left=fx.result[0]; 
                        this.dom.style.top=fx.result[1]; 
                    }.extend(this,this.dom), 
                    onFinish:function(fx,dom,finish) 
                    { 
                        //alert(this.options.end[0]) 
                        this.dom.style.left    = this.options.end.x; 
                        this.dom.style.top    = this.options.end.y; 
                        return this.options.onFinish(); 
                    }.extend(this,this.dom) 
                }); 
                this.expand(this); 
            }; 
        } 
    } 
});  
   

En el objeto algorithm, puedes ver como se usa cada uno de estos algoritmos, en teoria los algoritmos necesitan.

1.- Tiempo de inicio
2.- Tiempo transcurrido
3.- Tiempo de duracion

Y te devuelven el valor flotante que debe tener una accion especifica segun esos parametros. Es la clave para todos los "efectos" chulos :D.


connection closed.

[furoya]

Hola MaBoRaK : ¿ecuaciones? ... ¿algoritmo? ... ¿valor flotante? ...
¿Estás tratando de asustar a B031? . Todos sabemos que nos está engañando, ¡pero no me parece tan grave!

Hola B031 : las animaciones se hacen con un escript; algunas caben en HTML o CSS (lo que puede ser discutible), pero si es "paso a paso" como para transparentar de a poco, seguro debes usar flashscript, visualscript, jscript o —si vas a poner opacity y alpha— javascript, que anda en todos los navegadores.

Estos ejemplos se repiten desde hace años en el Foro y en toda la web, en sus variantes de hacer aparecer y desaparecer la imagen, al hacer click o pasar el puntero o quitar el puntero o pulsar un botón, o de forma automática en las transiciones carrousel (que no hacen más que transparentar la imagen de adelante para que se vea la de atrás). El "paso a paso" también tiene ejemplos para tirar al techo, porque como ya se dijo, sirve para cualquier efecto que cambie gradualmente.

Es imposible no encontrarlos.

Te dejo más códigos para que estudies y adaptes al tuyo. Y además aprovecho tu tema para dejar una variante que se me ocurrió mientras lo leía. No se parece a lo que pides, pero igual te va a servir para estudiar otra forma de hacer un "paso a paso manual". El cambio es 'borrando' con la manito sobre la imagen, que cambia cada 200 milisegundos a una transparencia de 0.05 por paso.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>BORRAR IMAGEN.</title>
<script type="text/javascript">

var transp = 1;
var espera = 0;
var tiempo;

function borra(T) {
if((espera == 0) && (transp > 0.01)){
document.title = transp;

transp = transp - 0.05;

T.style.MozOpacity = transp;
T.style.KhtmlOpacity = transp;
T.style.opacity = transp;
(T.filters)? T.filters.alpha.opacity = transp*100 : "";

espera = 1;
tiempo = setTimeout("espera = 0" , 200);
}
}

function dibuja(T) {
clearTimeout(tiempo);

transp = 1;
espera = 0;

T.style.MozOpacity = transp;
T.style.KhtmlOpacity = transp;
T.style.opacity = transp;
(T.filters) ? T.filters.alpha.opacity = transp*100 : "";

document.title = transp;
}

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

body {color: #ffffff; background-color: #000000; background-image: url("http://www.forosdelweb.com/images/buttons/firstnew.gif"); }
img {cursor: pointer; height:143px; width:150px; opacity:1; -moz-opacity:1; khtml-opacity:1; filter:alpha(opacity:100); font-family:cursive, fantasy, decorative; color:#808080; }
img {cursor: -moz-grab;}
h2 {background-color::#000000;}
</style>
</head>
<body>

<h2>Imagen se borra al mover el puntero por encima.</h2>

<img src="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" alt="Borrable" onmousedow="return false" onmousemove="borra(this)"; onmouseout="dibuja(this)">

</body>
</html> 

Opacidad de una capa

Fade En Imagenes

Efecto 'enfoque' con cambio de opacidad

CRear efecto de transicion entre dos imagenes

Presentación de Imagenes (Slide Show)

Tablas tranparentes y Contenido 100% Visible

[MaBoRaK]

loading...............

jejeje bueno eso que tu dices se conoce como transicion linear.

Código PHP:

                  linear: function(t, b, c, d){
                    return c*t/d + b;
                },  
   

connection closed.