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. 
    }); 

}); 

小提琴：http://jsfiddle.net/75DUC/

Answer 1

爲了實現交叉衰落（場重疊機智h文字）設置爲#text至position: absolute。

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

Answer 2

絕對定位將解決您的問題。您將有寬度和高度值玩，但這裏是一個粗略的估計是你正在尋找：Fiddle

更新CSS：

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

#search span { 
    padding: 15px; 
    display: block; 
    position: absolute; 
} 
#search { 
    background-color: #09F; 
    overflow: hidden; 
    height: 50px; 
    width:250px; 
    position:relative; 
} 
#text{ 
    top:0; 
    left:0; 
    width: 150px; 
} 
#field{ 
    top:0; 
    left:0; 
} 
#btn_go { 
    background-color: #06C; 
    padding: 15px; 
    display: block; 
    position: absolute; 
    top:0; 
    right:0; 
    color: #FFF; 
    text-decoration: none; 
    } 

UPDATE：

我已更新我的fiddle以包含擴大搜索框。我使用CSS轉換和一些額外的jQuery來使它工作。

額外的jQuery：

var search = $('#search') 
    var width = search.width(); 
    if(width == 125){ 
     search.width('250px'); 
    } 
    else{ 
     search.width('125px'); 
    } 

額外的CSS：

#search { 
    transition: width 0.5s linear; 
}