Question

Fellow Stackers，

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

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

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

为了实现交叉渐变（字段与文本重叠），请将#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;
    }

<强>更新

我已更新我的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;
}

jQuery淡入/淡出搜索字段

2 个答案: