javascript - 慢动作与 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;
}

如何使用 jQuery 以慢动作扩展 wrap_demo 的高度？

Answer 1

您可以使用 CSS 过渡属性。

将此添加到您的#wrap_demo 定义中:

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

See Working JSFiddle