调整固定大小比例的div

Question

我在jquery

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