problema con suma de variables

[cholyberreteaga]

hola amigos, tengo el siguiente problema:

estoy jugando con el atributo opacity, sumandole o restandole valor, para luego mediante un setTimeut() lograr hacer un efecto de degrade, pero tengo un problema cuando quiero sumarle al atributo en cuestion un valor.

osea:
function fadeOn(id){
var ele = document.getElementById(id).style;
suma = ele.opacity + 0.1

bla bla bla
if(suma<1){
ele.opacity = suma
setTimeout("fadeOn(id)"), 500)
}
}

pero la variable "suma", no hace mas que concatenarme ambas variables en lugar de sumarlas, en vez de obtener por ejemplo 0.3+0.1=0.4 obtengo 0.30.1

alguien sabe como puedo salir de esto?
saludos y gracias desde ya!
choly

[caricatos]

Hola:

Debes convertir la cadena a un número con parseFloat
... por cierto, en vez de degradé me paarece que deberías llamarlo fundido...

Saludos

[cholyberreteaga]

hola! muchisimas gracias, me ayudo bastante lo que dijiste, ahora estoy parado en otro problema que luego de un buen rato aun no logro solucionarlo.

el problema he logrado localizarlo y es en el setTimeout(), el codigo que arme hasta ahora es:


<script language="javascript" type="text/javascript">

function fade(id){
var ele = document.getElementById(id).style;

opa = parseFloat(ele.opacity)
suma = opa + 0.1

if(suma<1){
ele.opacity = suma
setTimeout("fade(id)"), 100)
}else{
alert("se llego al final")
}
}
</script>

<img src='http://www.google.com/intl/en/images/logo.gif' id=imagen

style="opacity:0.1">
<br><br>
<a href=javascript:fade('imagen');>mas opacity</a>

me di cuenta que el problema es el setTimeour() por que probe sustituyendolo por un alert y a medida que saltan los alerts el opacity va incrementando y todo funciona como debe ser, pero al poner el setTime, ya no pasa mas nada, alguna idea??

gracias nuevamente de antemano!

[caricatos]

Hola:

esta línea:
setTimeout("fade(id)"), 100)

debería ser más o menos así:
setTimeout("fade('" + id + "')"), 100)

Saludos

[cholyberreteaga]

por fin lo logre, no era asi como me lo pusiste, pero me llevo por el buen camino je, al final era:

setTimeout("fade('" + id + "')",100);

en tu respuesta pusiste un parentesis demas.

gracias de todas formas!

saludos!
choly.

[cholyberreteaga]

para el que quiera usarlo, aque les dejo el codigo, es un script que "desvanese" un objeto y lo esconde al mismo tiempo, al que le interese pruebelo.

gracias por todo!

//

<script language="javascript" type="text/javascript">

function mostrar(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
abrir(id)
setTimeout("fade('" + id + "')",100);
}else{
fadeout(id)
setTimeout("cerrar('" + id + "')",200);
}
}

function abrir(id){
var e = document.getElementById(id);
e.style.display = 'block'
}

function cerrar(id){
var e = document.getElementById(id);
e.style.display = 'none'
}

function fade(id){
var ele = document.getElementById(id).style;

opa = parseFloat(ele.opacity)
suma = opa + 0.1

if(suma<1){
ele.opacity = suma
setTimeout("fade('" + id + "')",10);
}
}

function fadeout(id){
var ele = document.getElementById(id).style;

opa = parseFloat(ele.opacity)
resta = opa - 0.1

if(resta>0){
ele.opacity = resta
setTimeout("fadeout('" + id + "')",10);
}

}

</script>

//

se activa llamando desde un enlace o lo que sea, a la funcion mostrar(objeto), si se vuelve a clicker se vuelve a cerrar.

saludos!
choly

[cholyberreteaga]

ejemplo:
http://www.genteloca.com/fade.htm

recuerden que deben ponerle inicialmente a cada obejto dentro del tag "style=display:none;opacity:0;" para que funcione!

ciaooo!

[caricatos]

Hola:

Un apunte que tendrías que considerar... opacity es un estilo nuevo (incluso me parece que no es estandar y no estña definido en w3.org)
Explorer usa filtros (alpha). Opera aún no lo implementa (a no ser que las nuevas versiones lo contemplen), y mozilla hasta hace muy poco tenía que anteponerse -moz- al estilo para que funcionara...

En estos foros hemos debatido cosas similares, te sugiero que hagas una búsqueda que supongo podrá orientarte.

Saludos