jquery opacidad animada frente a visualización: ninguno

Question

Si un elemento tiene una pantalla: ninguna en el CSS, entonces animar la opacidad de 0 a 1 en jQuery no hace que el elemento sea visible.

¿por qué?

¿Qué necesito agregar en animate() para que sea visible?

el.css({ 
      opacity: 0, 
      left: - 200 
      }).stop().animate({ 
      opacity: 1, 
      left: 0 
      }, { 
      duration: 333 
      }); 

Answer 1

Tendría que mostrarlo primero con el método show()^[docs].

Si el elemento no está ya en la opacidad 0, entonces usted probablemente querrá establecer esa primera:

.css('opacity',0).show().animate({opacity:1}); 

Ejemplo:http://jsfiddle.net/DnE7M/1/

---

o usted podría utilizar el método fadeIn()^[docs], que también debe ocuparse del display.

Ejemplo:http://jsfiddle.net/DnE7M/

---

EDIT:para que sea relevante para el código añadido a la pregunta: ¿

el.css({ 
     opacity: 0, 
     left: - 200 
     }) 
    .stop() 
    .show()  // <-- make the element able to be displayed 
    .animate({ 
     opacity: 1, 
     left: 0 
     }, { 
     duration: 333 
     }); 

También podría hacerlo bien en la llamada al método css()^[docs]:

el.css({ 
     opacity: 0, 
     display: 'block', // <-- 'block' or whatever is appropriate for you 
     left: - 200 
     }) 
    .stop() 
    .animate({ 
     opacity: 1, 
     left: 0 
     }, { 
     duration: 333 
     });