jquery - 在搜索栏中滑动嵌套的 Div

Question

我需要构建一个搜索栏，其中包含搜索输入、一个选项按钮，然后是悬停时向左扩展的第三个按钮，将前两个元素推到上方。

我已经尝试用 CSS 做到这一点，但无法让其他元素很好地滑过，所以我猜这需要用 jQuery 来完成？

当用户将鼠标悬停在箭头上时，div 向左滑动打开以显示“搜索”一词以及 20% 的灰色覆盖层。

“选项”按钮应在搜索按钮展开时向左滑动，但整个搜索环绕的宽度不应改变或移动。

就代码而言，这就是我现在所处的位置:

HTML:

        <div class="search-box">
            <input name="" type="text" placeholder="search" class="input"><a href="#" class="option">options</a>
            <div id="search-button">
                <div id="search-button-text">search &nbsp;</div>
                <a href="#"><img src="/static/images/search-btn.jpg" alt=""></a>
            </div>
        </div>

我试过的一些 JS 不走运:

    $(".search-button").hover(function() {
        $('search-button-text').style.display = 'block-inline';
   });

CSS:

.search-box {
    width:582px;
float:right;
clear:both;
}

.search-box .input {
float:left;
/*min-width: 500px;*/
border:1px solid #231f20;
height:25px !important;
font:16px "JosefinSans Regular", Arial, Helvetica, sans-serif;
margin:0px;
}

.search-box .option {
    display: block-inline;
float:left;
    height:20px !important;
    width: 50px;
border:1px solid #231f20;
    padding-top:7px;
    text-align: center;
border-left:none;
border-right:none;
color:#000;
text-decoration:none;
font-size:13px;
}

#search-button {
    display:inline-block;
}

#search-button-text {
    display: none;
    visibility: hidden;
}

Answer 1

我通过css3 transition 属性做了幻灯片效果，这是你要找的输出吗http://jsfiddle.net/T7FqG/1/我稍微修改了 html 并添加了幻灯片 CSS

HTML

<div class="clearfix searchbox">


   <input type="text" />

   <a href="#" class="searchbutton">
        <span class="searchtext">Search</span>
        <span class="arrow">&#8594;</span>
   </a>
   <a href="#" class="option">Options</a>


</div>

CSS

        *{padding:0; margin:0;}
    .clearfix:after {clear: both;content: ' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}
    .clearfix {display: inline-block;}
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    .searchbox{width:500px;border:1px solid #000; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
    .searchbox input{height:20px; padding:5px;border:0px solid #000; width:360px; outline:0;}
    .searchbox a{line-height:30px;  color:#000; float:right; display:block; text-decoration:none; padding:0 5px;}
    .searchbox a span{float:left; display:block;}
    .searchbox a.option{border-right:1px solid #000;border-left:1px solid #000;}
    .searchtext{width:41px;width:0; display:inline-block; overflow:hidden; -webkit-transition:300ms all;-moz-transition:300ms all;-o-transition:300ms all;transition:300ms all;}
    .searchbutton:hover .searchtext{width:45px;}
    .searchbutton:hover {background:#f2f2f2;}