准确的数字。高

Question

我在jquery中创建了宽度为100％且高度宽度为* .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});