Haga que un div se desvanezca bien después de un período de tiempo determinado


5

¿Cuál es la mejor manera de hacer que un <div> se desvanezca después de un período de tiempo determinado (sin utilizar algunas de las bibliotecas de JavaScript disponibles).

Estoy buscando una solución muy liviana que no requiera una gran biblioteca de JavaScript para ser enviada al navegador.

  0

jQuery es 15KB minificado y puede manejar esto en una sola línea. Apenas considero eso "enorme". 23 sep. 082008-09-23 21:57:37

  0

15KB es enorme, para algunos valores de gran tamaño. ¿Por qué utilizar 15k cuando 500 bytes es todo lo que se necesita? 23 sep. 082008-09-23 22:01:40

  0

@adam navegadores almacenan en caché el archivo, por lo que 15k es solo para el primer uso. Los beneficios de navegador cruzado de jQuery superan ampliamente la diferencia de 14.5k. 23 sep. 082008-09-23 22:08:16

  0

Aunque utilizo una biblioteca y no sé por qué alguien no lo haría, el póster original no quiere. No usar una biblioteca es su elección y su pregunta es válida independientemente de eso. JavaScript es un lenguaje válido en sí mismo. Además, tal vez su cliente no lo permita, no lo sabemos. 23 sep. 082008-09-23 22:25:16

  0

En serio, deduces tanto sobre las intenciones del OP como las respuestas que sugieren jQuery. Simplemente publique una mejor respuesta si tiene una y deje que el PO y los votos decidan. Así es como se supone que debe funcionar. 24 sep. 082008-09-24 04:06:14

  0

Además, jQuery tiene versiones pre-minificadas ya alojadas que puede vincular a las cuales es muy probable que ya estén en caché. 26 sep. 082008-09-26 17:29:42

12

No estoy seguro de por qué estarías tan en contra de usar algo como jQuery, lo que haría que lograr este efecto sea trivial, pero esencialmente, debes envolver una serie de cambios en la opacidad-opacidad, opacidad y filtro : reglas alfa CSS en un setTimeout().

O bien, use jQuery y ajuste una llamada fadeOut() en setTimeout. Tu elección.

  0

Otro fanático de jQuery empujando su biblioteca favorita hacia alguien que declaró que no quiere usar una ...: P 23 sep. 082008-09-23 22:09:33

  0

¿Por qué reinventar la rueda? Si no te gusta jquery, usa scriptaculuos, mootools o lo que sea que flote tu bote. Reinventar la rueda es tonto. 23 sep. 082008-09-23 22:16:44

+1

Ese no es mi punto: uso una biblioteca (MochiKit).Mi punto es que el cartel original NO quería que alguien respondiera con "use library X", pero ¿qué ocurre? Todos y su mamá coinciden con eso. No usar una biblioteca es su elección y su pregunta es válida independientemente. 23 sep. 082008-09-23 22:22:56

  0

El OP dijo que no querían usar una biblioteca pero que tenía una lógica defectuosa. En ese caso, creo que es una sugerencia válida. Si tuvieran una razón válida para no querer usar una biblioteca, eso sería diferente. 23 sep. 082008-09-23 22:24:16

  0

Entendido - el OP puede no estar al tanto de la realidad de algunas de las mejores bibliotecas, pero tampoco debemos tratar de leer su mente; tal vez simplemente formuló su pregunta mal, consciente de lo pequeñas que son pero, por el motivo que sea no puedo usar uno 23 sep. 082008-09-23 22:29:28

  0

Creo que es gracioso que cada vez que se hace una pregunta de JavaScript en este sitio, los fanáticos de jQuery respondan inmediatamente "¡use jQuery!" incluso cuando podría no ser una buena opción para el problema. 23 sep. 082008-09-23 22:30:39

  0

En mi experiencia, la realidad de la respuesta es que no vas a encontrar una solución "ligera" para desvanecer un elemento con el tiempo después de un retraso que funcionará en todos los navegadores: el concepto de "reinventando la rueda" ciertamente aplica Además, para ser justos, dijo que no quería "una gran biblioteca". 24 sep. 082008-09-24 00:07:54

  0

Simplemente ignore a Jason, en algún momento JQuery hirió sus sentimientos y aparentemente le gusta hacer más trabajo del necesario. 24 sep. 082008-09-24 04:03:54


2

En estos días, siempre usaría una biblioteca para eso; el progreso que han realizado ha sido fenomenal, y la funcionalidad de varios navegadores solo lo vale. Entonces esta respuesta es una falta de respuesta. Solo me gustaría señalar que jQuery es todo de 15kB.


-2

Sé que estás en las bibliotecas, pero recomiendo echar un vistazo a moo.fx: http://moofx.mad4milk.net/ - Creo que es como 3k.

jQuery es bastante pequeño también.


0

Use setTimeout con la hora inicial para activar la rutina de fundido y luego use setTimeout con temporizador bajo para pasar por el nivel de opacidad de la imagen hasta que desaparezca.

Sin embargo, jQuery puede llegar a aproximadamente 15k y es una descarga de una sola vez para el cliente, así que no lo llamaría enorme.


4

Aquí hay algunos javascript que lo hacen. Lo encontré en un sitio web tutorial de JavaScript en algún lugar (que no pude encontrar de nuevo) y lo modifiqué.

var TimeToFade = 200.0; 

function fade(eid) 
{ 
    var element = document.getElementById(eid); 
    if(element == null) return; 

    if(element.FadeState == null) 
    { 
     if(element.style.opacity == null || element.style.opacity == '' 
       || element.style.opacity == '1') { 
      element.FadeState = 2; 
     } else { 
      element.FadeState = -2; 
     } 
    } 

    if(element.FadeState == 1 || element.FadeState == -1) { 
     element.FadeState = element.FadeState == 1 ? -1 : 1; 
     element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft; 
    } else { 
     element.FadeState = element.FadeState == 2 ? -1 : 1; 
     element.FadeTimeLeft = TimeToFade; 
     setTimeout("animateFade(" + new Date().getTime() 
      + ",'" + eid + "')", 33); 
    } 
} 

function animateFade(lastTick, eid) 
{ 
    var curTick = new Date().getTime(); 
    var elapsedTicks = curTick - lastTick; 

    var element = document.getElementById(eid); 

    if(element.FadeTimeLeft <= elapsedTicks) { 
     element.style.opacity = element.FadeState == 1 ? '1' : '0'; 
     element.style.filter = 'alpha(opacity = ' 
      + (element.FadeState == 1 ? '100' : '0') + ')'; 
     element.FadeState = element.FadeState == 1 ? 2 : -2; 
     element.style.display = "none"; 
     return; 
    } 

    element.FadeTimeLeft -= elapsedTicks; 
    var newOpVal = element.FadeTimeLeft/TimeToFade; 
    if(element.FadeState == 1) { 
     newOpVal = 1 - newOpVal; 
    } 

    element.style.opacity = newOpVal; 
    element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')'; 

    setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33); 
} 

el código HTML siguiente muestra cómo funciona:

<html><head> 
    <script type="text/javascript" src="fade.js"></script> 
</head><body> 
    <div id="fademe" onclick="fade('fademe')"> 
     <p>This will fade when you click it</p> 
    </div> 
</body></html> 
  0

desafortunadamente, element.style.opacity no es compatible de forma consistente entre los navegadores. Las tablas en particular son difíciles de desvanecer. 24 sep. 082008-09-24 00:10:03

  0

Probé este código, funciona en tablas en FF3 y Chrome, IE7 simplemente oculta los elementos, en realidad no se desvanecen en absoluto. 24 sep. 082008-09-24 03:10:13

+1

Si hubiera una manera de manejar todas esas cosas del navegador cruzado automáticamente ... mmm ... 24 sep. 082008-09-24 04:07:38


0

buscar en la biblioteca de Animación YUI (Yahoo User Interface): http://developer.yahoo.com/yui/animation/

No reinventar la rueda. Las bibliotecas son nuestros amigos. :-)

+1

No necesariamente está reinventando la rueda, quizás no necesita todo lo que una biblioteca tiene para ofrecer. Si necesito un neumático, no compro un carro completo solo para quitarle un neumático. 24 sep. 082008-09-24 03:11:52