jQuery动画：opacity和display:none的区别

Question

如果一个元素在CSS中设置了display:none，则使用jQuery将不透明度从0动画到1并不能使该元素可见。

为什么？

我需要在animate()中添加什么才能使它可见？

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

- Katy

Answer 1

你需要使用show()^[文档]方法先显示它。

如果你的元素还没有不透明度为0，那么你可能首先要设置它：

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

例子: http://jsfiddle.net/DnE7M/1/

---

或者你可以使用fadeIn()^[文档]方法，它应该也会处理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()^[文档]方法时进行操作：

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

- user113716