[SOLUCIONADO] Fade out + Display:none

[altrisi]

Tengo una página web con un script PHP, que incluye mensajes de error. El caso es que querría que al pulsar un botón que tiene interno hiciera un fade out (ese ya lo tengo) y por último cambiase el display por display:none. He intentado hacerlo pero el display none me aparece antes del fade out.

Estos són mis códigos

HTML:

Código HTML:

<div id="alert" style="width:500px;height:50px;background-color:red;opacity:1;-moz-opacity:1;filter:alpha(opacity:0);">
  <button onclick="javascript:fade(2);">X</button>
</div>
<p>Texto que debería subir, ya que es el resto de la página</p>
 

Javascript:

Código Javascript:

function fade(inout) {
 
       switch(inout) {
       
              case 1:
                     for(opacidad=0,tiempo=30; opacidad<=100; opacidad+=4,tiempo+=30) {
 
setTimeout("document.getElementById('alert').style.MozOpacity='"+opacidad/100+"'",tiempo);
                     /*Este es el estándar*/       setTimeout("document.getElementById('alert').style.opacity='"+opacidad/100+"'",tiempo);
                     /*Para kit KHTML de KDE */       setTimeout("document.getElementById('alert').style.KHTML='"+opacidad/100+"'",tiempo);
                            /*Para internet Explorer*/ 
setTimeout("document.getElementById('alert').style.filter='alpha(opacity="+opacidad+")'",tiempo);
                     }
                     
              break;
              case 2:
                     for(opacidad=100,tiempo=30; opacidad>=0; opacidad-=4,tiempo+=30) {
                            setTimeout("document.getElementById('alert').style.MozOpacity='"+opacidad/100+"'",tiempo);
                            setTimeout("document.getElementById('alert').style.opacity='"+opacidad/100+"'",tiempo);
                            setTimeout("document.getElementById('alert').style.KHTML='"+opacidad/100+"'",tiempo);
                            setTimeout("document.getElementById('alert').style.filter='alpha(opacity="+opacidad+")'",tiempo);
                     }
                     
              break;
       }
 
}
 

Previsualización:

Clic [URL="http://jseditor.proyectosbds.com/welcome/46036/edit"]aquí[/URL]!

PD: Si alguien también me podría decir cómo hacer que subiera suavizado, estaría más que encantado.

[juanito1712]

en el fragmento que pasas no aparece ningún display none ni veo que funcione en el fiddle, por mucho que le des un valor 0 de opacidad, el elemento sigue estando en en flujo de página

if(opacidad==0){
display none
}else{
display anterior
}

algo de este estilo dentro del fade y fuera del switch quiza funcione

[altrisi]

Iniciado por juanito1712

en el fragmento que pasas no aparece ningún display none ni veo que funcione en el fiddle, por mucho que le des un valor 0 de opacidad, el elemento sigue estando en en flujo de página

if(opacidad==0){
display none
}else{
display anterior
}

algo de este estilo dentro del fade y fuera del switch quiza funcione

1. El "display:none;" no está porqué como no me funcionaba bien lo quité.
2. Ese codigo no me acaba de funcionar. Lo he probado en casi todos los puntos del script y no va.

[juanito1712]

vale, el problema lo tienes en que estas lanzando timeouts desde un for, entonces el for se ejecuta a la máxima velocidad posible y los timeouts quedan como en cola, para cuando el primer timeout se ejecuta, opacidad ya ha llegado al extremo opuesto.


https://jsfiddle.net/oLracp2v/3/