jquery - 调整具有固定大小比例的 div

Question

我在 jquery 中制作了一个宽度为 100% 且高度为 width*.1 的 div

http://jsfiddle.net/2drYk/

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

$('.container').height($(this).width()*.1);

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

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

}

如何从这里扩大点击高度？

Answer 1

$('.container').height($(this).width()*0.1);

$('.container').on('click',function(){
    $(this).animate({height: ($(this).width()*0.1 + $(this).height())});
});

在这里演示JSFIDDLE

Answer 2

.container
{
    width:100%;
    background:black;
    transition:all 500ms;
    -webkit-transition:all 500ms;
    -o-transition:all 500ms;
}

.container.newheight{height:500px}

$('.container').on('click',function(){
   $(this).toggleClass('newheight');
});