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