jqueryアニメーション不透明度vs表示：なし

Question

要素にCSSの表示：なしがある場合、jQueryで不透明度を0から1にアニメーション化しても要素が表示されません。

なぜですか？

アニメーションを表示するには、何を追加する必要がありますか？

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/

---

それとも、単に使用することができますまたdisplayの世話をするべきであるfadeIn()^[docs]メソッド。

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