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 
     });