jquery animate opacity vs display：none

Question

如果一个元素在CSS中有display：none，那么在jQuery中将不透明度从0设置为1不会使元素可见。

为什么？

我需要在animate（）中添加什么才能使其可见？

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

Answer 1

您需要先使用show()^[docs]方法显示它。

如果你的元素尚未处于不透明度0，那么你可能想先设置它：

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

示例： http://jsfiddle.net/DnE7M/1/

---

或者您可以使用fadeIn()^[docs]方法，该方法也应该处理display。

示例： http://jsfiddle.net/DnE7M/

---

编辑： 使其与添加到问题中的代码相关：

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

您也可以在调用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
      });