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