jquery animate opacity vs display:none

Question

If a element has a display:none on it in the CSS, then animating the opacity from 0 to 1 in jQuery doesn't make the element visible.

why?

what do I need to add in animate() to make it visible?

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

Answer 1

You'd need to show it first using the show()^[docs] method.

If your element isn't already at opacity 0, then you'd probably want to set that first:

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

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

---

Or you could just use the fadeIn()^[docs] method, which should take care of the display as well.

Example: http://jsfiddle.net/DnE7M/

---

EDIT: To make it relevant to the code added to the question:

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

You could also do it right in the call to the css()^[docs] method:

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