Foros del Web » Programando para Internet » Javascript »

Cambiar estilo de div por tiempo limitado

Estas en el tema de Cambiar estilo de div por tiempo limitado en el foro de Javascript en Foros del Web. ¡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 ...
  #1 (permalink)  
Antiguo 26/03/2010, 04:28
 
Fecha de Ingreso: marzo-2010
Mensajes: 6
Antigüedad: 11 años, 2 meses
Puntos: 1
Cambiar estilo de div por tiempo limitado

¡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
  1. <script>
  2.         (function() {
  3.             var el = _gel('edit_controls');
  4.             var duration = 2;
  5.             animateProperty(el, el.style,
  6.                 'backgroundColor', '#cee3ff', '#efefef', 1, duration,
  7.                 'rgb6', 'linear');
  8.             })();
  9. </script>

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

Última edición por Bobert; 26/03/2010 a las 04:54
  #2 (permalink)  
Antiguo 26/03/2010, 05:44
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 13 años, 3 meses
Puntos: 574
Respuesta: Cambiar estilo de div por tiempo limitado

Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <title>Documento sin t&iacute;tulo</title>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4. <style type="text/css">
  5. <!--
  6. .acambiar {
  7.     background-color: #000000;
  8. }
  9. .cambiado {
  10.     background-color: #ff0000;
  11. }
  12. -->
  13. <script language="JavaScript" type="text/JavaScript">
  14. function cambia(iddiv){
  15. if (document.getElementById(iddiv).className=="acambiar"){
  16.         document.getElementById(iddiv).className="cambiado";
  17.     }else{
  18.         document.getElementById(iddiv).className="acambiar";
  19.     }
  20. }
  21. function timedCambia(iddiv)
  22. {
  23.     document.getElementById(iddiv).className="cambiado";
  24.     var funcion="cambia('"+iddiv+"')";
  25.     var t=setTimeout(funcion,1000);
  26. }
  27. </head>
  28. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  29.   <tr>
  30.     <td><a href="#" onClick="timedCambia('eldiv')">Hacer clik</a></td>
  31.   </tr>
  32.   <tr>
  33.     <td><div class="acambiar" id="eldiv">&nbsp;</div></td>
  34.   </tr>
  35.  
  36. </body>
  37. </html>

Esto?

Quim
  #3 (permalink)  
Antiguo 26/03/2010, 05:56
 
Fecha de Ingreso: marzo-2010
Mensajes: 6
Antigüedad: 11 años, 2 meses
Puntos: 1
Respuesta: Cambiar estilo de div por tiempo limitado

Casi...

El cambio de color es justamente como lo quería, pero, ¿no se puede hacer animadamente?
Muchas gracias por tu ayuda.
  #4 (permalink)  
Antiguo 26/03/2010, 06:46
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 13 años, 3 meses
Puntos: 574
Respuesta: Cambiar estilo de div por tiempo limitado

animadamente?

Quieres decir con un degradado de color?

Quim
  #5 (permalink)  
Antiguo 26/03/2010, 08:06
 
Fecha de Ingreso: marzo-2010
Mensajes: 6
Antigüedad: 11 años, 2 meses
Puntos: 1
Respuesta: Cambiar estilo de div por tiempo limitado

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.
  #6 (permalink)  
Antiguo 26/03/2010, 15:46
 
Fecha de Ingreso: marzo-2010
Mensajes: 6
Antigüedad: 11 años, 2 meses
Puntos: 1
Respuesta: Cambiar estilo de div por tiempo limitado

¿Es que no se puede?

Etiquetas: estilo, limitado, anclas, cambios
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:24.