jqueryで幅100%、高さwidth*.1のdivを作成しました
<figure class="container">
</figure>
$('.container').height($(this).width()*.1);
*
{
margin:0;
padding:0;
border:0
}
.container
{
width:100%;
background:black;
}
ここからクリックで高さを拡張するにはどうすればよいですか?
jqueryで幅100%、高さwidth*.1のdivを作成しました
<figure class="container">
</figure>
$('.container').height($(this).width()*.1);
*
{
margin:0;
padding:0;
border:0
}
.container
{
width:100%;
background:black;
}
ここからクリックで高さを拡張するにはどうすればよいですか?
$('.container').height($(this).width()*0.1);
$('.container').on('click',function(){
$(this).animate({height: ($(this).width()*0.1 + $(this).height())});
});
ここでデモJSFIDDLE
.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');
});