JQuery .animate（）;固定の高さでは動作しません

Question

私はこれまで何度も作業しており問題はありませんでした。 DIVの高さおよび/または幅をwidth/height: 'toggle'でアニメーション化するか、または'toggle'を指定された幅/高さで置き換えます。

setTimeout(function(){ 
    $('.input-group .Advanced').animate({ 
     height: 'toggle' 
    }, { 
     duration: 500, 
    }); 
} , 500); 

height: 'toggle' - Demo on JSFiddle
height: '400px'  からDemo on JSFiddle

コードスニペットは完全に正常に動作しますが、私は、これは、特定の高さに設定する必要があり、そのよう'400px'などの固定高さに私の'toggle'を交換することは絶対にありません何も...

Answer 1

display:noneをに設定しているため、指定した高さが機能していません0クラス。 jqueryの組み込みのtoggle文字列を使用すると、それを処理し、view.Butで隠し要素を作成します。しかし、独自の高さを定義すると、その要素をビューに表示する必要があります。あなたはJquery animate() reference .ITのが書かれて

ノートを参照してくださいすることができますように.slideDown（）と.fadeIn（）、効果の一部として隠された要素は表示されません.animate（）メソッドとして速記アニメーション方法とは異なり。たとえば、$（ "someElement"）.hide（）。animate（{height： "20px"}、500）を指定すると、アニメーションは実行されますが、要素は非表示のままです。

あなたはこれがビューであなたの隠された要素を取得します

setTimeout(function(){ 
     $('.input-group .Advanced').animate({ 
      height: '500px', 
      opacity:'show' 
     }, { 
      duration: 500 
     }); 
    } , 500); 

あなたのクラスをアニメーション化するためにこれを行うことができます。あなたは不透明度をトグルする必要がありますのでDemo of your code

Answer 2

$('.form-control').click(function(e) { 

    $(this).addClass('InputFreezeFocus'); 

    $(this).animate({ 
     width: '400px' 
    }, { 
     direction: 'left', 
     duration: 500, 
    }); 
    setTimeout(function(){ 
     $('.input-group .Advanced').animate({ 
      height: '400px', 
      opacity: 'toggle' 
     }, { 
      duration: 500, 
     }); 
    } , 500); 
}); 

.animate()方法は効果の一部として隠された要素は表示されません。

Link to fiddle