Cambiar estilo de div por tiempo limitado

Bobert · #1 (**permalink**) 26/03/2010, 04:28

¡Hola!
Después de tanto tiempo conociendo este foro nunca pensé que acabaría registrándome y pidiendo ayuda, ya que siempre he encontrado -por un lado o por otro- la solución a mis dudas...

...pero esta vez no es el caso

así que espero que puedan ayudarme.

Como el título dice, quiero cambiar el estilo de un div al dar clic en un enlace determinado (para ser exactos, quiero cambiar su color de fondo). Sé que eso es sencillo... lo que no sé es cómo hacerlo por tiempo limitado.

Para ser más exactos, quiero que al dar clic en ese enlace, el color de fondo pase de ser negro a ser rojo (por decir algo), y que ese cambio dure UN segundo; y una vez pasado ese segundo, vuelva a la normalidad con una animación que dure cierto tiempo (ej. 2, 3, 4 segundos).

Por si suena enredadizo, les cito un ejemplo: en YouTube, cuando entras a tu canal, la barra de herramientas es azul, y animadamente se vuelve semi-blanca. Algo así es lo que busco.

EDIT: aquí les pongo el fragmento de código (ubicado en YouTube) que hace posible el efecto que busco...

Código Javascript:

Ver original<script> 
        (function() {
            var el = _gel('edit_controls');
            var duration = 2;
            animateProperty(el, el.style,
                'backgroundColor', '#cee3ff', '#efefef', 1, duration,
                'rgb6', 'linear');
            })();
</script>

La cosa es que no tengo ni idea de cómo hacerlo funcionar

quimfv · #2 (**permalink**) 26/03/2010, 05:44

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.acambiar {
    background-color: #000000;
}
.cambiado {
    background-color: #ff0000;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
function cambia(iddiv){
if (document.getElementById(iddiv).className=="acambiar"){
        document.getElementById(iddiv).className="cambiado";
    }else{
        document.getElementById(iddiv).className="acambiar";
    }
}
function timedCambia(iddiv)
{
    document.getElementById(iddiv).className="cambiado";
    var funcion="cambia('"+iddiv+"')";
    var t=setTimeout(funcion,1000);
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="#" onClick="timedCambia('eldiv')">Hacer clik</a></td>
  </tr>
  <tr>
    <td><div class="acambiar" id="eldiv">&nbsp;</div></td>
  </tr>
</table>
 
</body>
</html>

Esto?

Quim

Bobert · #3 (**permalink**) 26/03/2010, 05:56

Casi...

El cambio de color es justamente como lo quería, pero, ¿no se puede hacer animadamente?
Muchas gracias por tu ayuda.

quimfv · #4 (**permalink**) 26/03/2010, 06:46

animadamente?

Quieres decir con un degradado de color?

Quim

Bobert · #5 (**permalink**) 26/03/2010, 08:06

Si, como el ejemplo citado...

Doy clic en el enlace, el div cambia de color y permanece así por un segundo... y luego vuelve a la normalidad con un suave degradado que dura 2, 3 segundos (el tiempo no importa, lo que importa es la animación).

Gracias de antemano.

Bobert · #6 (**permalink**) 26/03/2010, 15:46

¿Es que no se puede?