慢動作與jQuery

Question

我有代碼在這裏：http://jsfiddle.net/LnWRL/4/：

HTML：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<div id="wrap_demo"> 
    <div id="demo"></div> 
    <div id="show"></div> 
    <input type="button" id="click" value="click" onClick="function" /> 
</div> 
<script> 
$(document).ready(function(){ 
    $("#click").click(function() { 
     if($("#wrap_demo").height()==50) 
     $("#wrap_demo").css("height","200"); 
     else $("#wrap_demo").css("height","50"); 
    }); 
}); 
</script> 

和CSS代碼：

#wrap_demo{ 
width:300px; 
height:50px; 
border:1px solid black; 

float:left; 
} 
#demo{ 
width:200px; 
height:50px; 
background: black; 
position:relative; 
float:left; 
padding-rignt:20px; 
} 
#demo:before 
{ 
content:""; 
width:150px; 
height:44px; 
background:white; 
position:absolute; 
margin:3px 50px; 
float:left; 
} 
#show 
{ 

width:50px; 
height:50px; 
background:transparent; 
margin:0 0 0 200px;/* 
border-width:25px; 
border-color:transparent transparent transparent black; 
border-style:solid; */ 
position:relative; 
} 
#show:before 
{ 
content:""; 
width:0; 
height:0; 
background:transparent; 
border-width:25px; 
border-color:transparent transparent transparent black; 
border-style:solid; 
position:absolute; 

} 
#show:after 
{ 
content:""; 
width:0; 
height:0; 
background:transparent; 
border-width:22px; 
border-color:transparent transparent transparent white; 
border-style:solid; 
position:absolute; 
margin: 3px auto 3px 0; 
} 
#click{ 
display:block; 
width:40px; 
height:40px; 
background:white; 
border-radius:50%; 
border:1px solid black; 
position:absolute; 
top:13px; 
left:170px; 
font-size:12px; 
line-height:30px; 
text-align:center; 
cursor:pointer; 
} 
#click:focus{ 
outline:none; 
} 

我怎樣才能在慢動作與延長wrap_demo高度jQuery的？

Answer 1

使用https://api.jquery.com/animate/

.animate({height: '300px'}); 

Answer 2

你可以使用一個CSS過渡性質。而不是

transition: height 0.5s; 
-webkit-transition: height 0.5s; 
-moz-transition: height 0.5s; 
-o-transition: height 0.5s; 

See Working JSFiddle