jQuery 淡入/淡出搜索字段

Question

各位堆垛机，

我希望将搜索按钮“转换”为搜索字段。

这就是我到目前为止所得到的，但是动画非常不稳定。

HTML

<div id='search'>
    <span id='text'>Search</span><span id='field' style="display:none;"><input type="text" name="firstname"></input></span><a href='#' id='btn_go'>Go</a>
</div>

CSS

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

#search span {
    padding: 15px;
    display: block;
    float: left;
}
#search {
    background-color: #09F;
    overflow: hidden;
    float: left;
}
#btn_go  {
    background-color: #06C;
    padding: 15px;
    display: block;
    float: left;
    color: #FFF;
    text-decoration: none;
    }

JS

$( "#btn_go" ).click(function() {
  $( "#text" ).fadeToggle( "slow", function() {
    // Animation complete.
  });

      $( "#field" ).fadeToggle( "slow", function() {
    // Animation complete.
  });

});

fiddle :http://jsfiddle.net/75DUC/

Answer 1

为了实现交叉淡入淡出(字段与文本重叠)将 #text 设置为 position: absolute。

http://jsfiddle.net/75DUC/1/