SoloCodigo

Programación Web y Scripting => JavaScript => Mensaje iniciado por: Deiv en Lunes 3 de Agosto de 2009, 21:49

Título: Efecto FADE en DIV contenedor al Salir de la Página
Publicado por: Deiv en Lunes 3 de Agosto de 2009, 21:49
Hola de nuevo,
Al no recibir respuestas que me convencieran sobre el Tema tuve que investigar mucho más, pero esta vez me dediqué a buscar en las Páginas en inglés y encontré esta:
http://brainerror.net/ (http://brainerror.net/" onclick="window.open(this.href);return false;)
http://www.brainerror.net/scripts_js_blendtrans.php (http://www.brainerror.net/scripts_js_blendtrans.php" onclick="window.open(this.href);return false;)
http://brainerror.net/scripts/javascrip ... /demo.html (http://brainerror.net/scripts/javascript/blendtrans/demo.html" onclick="window.open(this.href);return false;)
donde realmente existen los mejores efectos de FADE (blending) opacado para Imágenes, este me pareció el mejor Script que existe para este Efecto.
También encontré otra Página de un Foro en inglés, donde habían modificado este Script para realizar un Efecto Fade de Página (que es lo que en realidad me interesa), hay dos líneas en la parte inferior:
Código: Text
  1. //OPEN DIV code
  2. javascript:opacity('help1', 0, 100, 500)
  3. //CLOSE DIV code
  4. //javascript:opacity('help1', 100, 0, 500)
  5.  
Que si intercambian cada una de ellas verán los efectos tanto al ingresar la Página, como al salir de la misma, trabaja muy bien ya que engloba un DIV contenedor donde se ve ese efecto.
Necesito de vuestra ayuda aquí, ya que no estoy tan interesado el Efecto Fade cuando se ingresa a la Página, sino que al SALIR desde la mía obteniendo este efecto, pero ni idea de cómo hacerlo.
¿De que manera puedo modificar este código para que el efecto Fade se vea perfectamente al cambiar a otra página?

Código: Text
  1. <Head>
  2. <title>Untitled Document</title>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4.  
  5. <style type="text/css">
  6. div.opac_xmpl {
  7.     padding: 3px;
  8.     filter: alpha(opacity=0);
  9.     -moz-opacity: 0;
  10.     opacity: 0;
  11.     position: absolute;
  12.     float: right;
  13.     z-index: 1;
  14.     display: compact;
  15.     border: thin solid #3300FF;
  16. }
  17.  
  18.  
  19. .hidden {
  20.     visibility: hidden;
  21.     display: none;
  22. }/* CSS Document */
  23. </style>
  24. </head>
  25.  
 

<body>
Código: Text
  1. <SCRIPT LANGUAGE="Javascript">
  2. function opacity(id, opacStart, opacEnd, millisec) {
  3.     //speed for each frame
  4.     var speed = Math.round(millisec / 100);
  5.     var timer = 0;
  6.  
  7.     //determine the direction for the blending, if start and end are the same nothing happens
  8.     if(opacStart > opacEnd) {
  9.         for(i = opacStart; i >= opacEnd; i--) {
  10.             setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
  11.             timer++;
  12.         }
  13.     } else if(opacStart < opacEnd) {
  14.         for(i = opacStart; i <= opacEnd; i++)
  15.             {
  16.             setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
  17.             timer++;
  18.         }
  19.     }
  20. }
  21.  
  22. //change the opacity for different browsers
  23. function changeOpac(opacity, id) {
  24.     var object = document.getElementById(id).style;
  25.     object.opacity = (opacity / 100);
  26.     object.MozOpacity = (opacity / 100);
  27.     object.KhtmlOpacity = (opacity / 100);
  28.     object.filter = "alpha(opacity=" + opacity + ")";
  29. }
  30.  
  31. function shiftOpacity(id, millisec) {
  32.     //if an element is invisible, make it visible, else make it ivisible
  33.     if(document.getElementById(id).style.opacity == 100) {
  34.         opacity(id, 100, 0, millisec);
  35.     } else {
  36.         opacity(id, 0, 100, millisec);
  37.     }
  38. }
  39. //OPEN DIV code
  40. javascript:opacity('help1', 0, 100, 500)
  41.  
  42. //CLOSE DIV code
  43. //javascript:opacity('help1', 100, 0, 500)
  44. </SCRIPT>
  45.  
Código: Text
  1. <div id="help1" class="opac_xmpl" style="width:675px; height:200px;"> awhole bunch of text
  2.     <div> <IMG height=109 alt="" src="fade00.jpg" width=109 border=0></div>
  3. </div>
  4.  
</body>
¿De que manera puedo modificar este código para que el efecto Fade se vea perfectamente al cambiar (SALIR) a otra página?
Ni idea de cómo hacerlo.