jquery - .height の正確な数値

Question

jqueryで幅100%、高さwidth*.1のdivを作成しました。

比率に関係なく高さを拡大することはできましたが、正確に拡大することはできません。

本当は400pxまで拡大したいのですが、可能でしょうか？

これが私のコードです: http://jsfiddle.net/2drYk/3/

* 
{
margin:0; 
padding:0; 
border:0
}

.container
{
    width:100%;
    background:black;

}

<figure class="container">
</figure>

$('.container').height($(this).width()*0.1);
  var toggleCheck =0;
$('.container').click(function(){

    if(toggleCheck ==1){
         $(this).stop().animate({height: ( $(this).height()-$(this).width()*0.1 )});
        toggleCheck = 0;
    }else{
 $(this).stop().animate({height: ($(this).width()*0.1 + $(this).height())});
        toggleCheck = 1;
    }
});

Answer 1

LIVE DEMO

var $cont = $('.container'),
    init_size = $cont.width() * 0.1,
    c = 0,                // counter
    s = [400,init_size];  // sizes array

$cont.height( init_size );

$cont.click(function(){   
  $(this).stop().animate({ height: s[c++%2] });
});

Answer 2

コンテナを 400px だけ拡大したい場合は、次の js を使用できます。

var container = $('.container');
container.height(container.width()*0.1);
var originalHeight = container.height();
var newHeight = 400 + originalHeight;

container.click(function(){
  if($(this).height() == originalHeight){
     $(this).stop().animate({height: newHeight});
  }else{
     $(this).stop().animate({height: originalHeight});
  }
});

http://jsfiddle.net/2drYk/16/

Answer 3

$(this).stop().animate({height: 400});