Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/12/2010, 19:00
Avatar de Tecktonikrazy
Tecktonikrazy
 
Fecha de Ingreso: enero-2010
Mensajes: 224
Antigüedad: 15 años
Puntos: 3
Pregunta style.display en efecto fade

Tengo el siguiente codigo para hacer un efecto fade en algun objeto, pero resulta que al desvanecerlo, este solo esta invisible, pero esta ahi, en que parte le agrego element.style.display = 'none o 'block' para que el elemento no estorbe?

Código HTML:
<style type="text/css">
  .drag { position:absolute; cursor:move }
</style> 

Código Javascript:
Ver original
  1. var TimeToFade = 400.0;
  2.  
  3. function fade(eid)
  4. {
  5.   var element = document.getElementById(eid);
  6.   if(element == null)
  7.     return;
  8.    
  9.   if(element.FadeState == null)
  10.   {
  11.     if(element.style.opacity == null
  12.         || element.style.opacity == ''
  13.         || element.style.opacity == '1')
  14.     {
  15.       element.FadeState = 2;
  16.     }
  17.     else
  18.     {
  19.       element.FadeState = -2;
  20.     }
  21.   }
  22.    
  23.   if(element.FadeState == 1 || element.FadeState == -1)
  24.   {
  25.     element.FadeState = element.FadeState == 1 ? -1 : 1;
  26.     element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
  27.   }
  28.   else
  29.   {
  30.     element.FadeState = element.FadeState == 2 ? -1 : 1;
  31.     element.FadeTimeLeft = TimeToFade;
  32.     setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
  33.   }  
  34. }
  35. function animateFade(lastTick, eid)
  36. {  
  37.   var curTick = new Date().getTime();
  38.   var elapsedTicks = curTick - lastTick;
  39.  
  40.   var element = document.getElementById(eid);
  41.  
  42.   if(element.FadeTimeLeft <= elapsedTicks)
  43.   {
  44.     element.style.opacity = element.FadeState == 1 ? '1' : '0';
  45.     element.style.filter = 'alpha(opacity = '
  46.         + (element.FadeState == 1 ? '100' : '0') + ')';
  47.     element.FadeState = element.FadeState == 1 ? 2 : -2;
  48.     return;
  49.   }
  50.  
  51.   element.FadeTimeLeft -= elapsedTicks;
  52.   var newOpVal = element.FadeTimeLeft/TimeToFade;
  53.   if(element.FadeState == 1)
  54.     newOpVal = 1 - newOpVal;
  55.  
  56.   element.style.opacity = newOpVal;
  57.   element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
  58.  
  59.   setTimeout("animateFade(" + curTick + ",'" + eid + "');", 33);
  60. }


Código HTML:
<div class="drag" style="width:20px;height:20px;background-color:#CC0000"></div> 
__________________
I LOVE HTML (How To Make Love)