Jquery 在搜索栏中滑动嵌套的div

我需要建立一个包含搜索输入的搜索栏，一个选项按钮，然后当鼠标悬停时，第三个按钮向左扩展，将前两个元素推到上面

我曾尝试用CSS来实现这一点，但无法让其他元素很好地滑动，所以我猜这需要用jQuery来实现

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

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

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

HTML:

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

---

我已经通过css3转换属性完成了幻灯片效果，这是您想要的输出吗？我已经稍微修改了html并添加了幻灯片CSS

HTML

---

我想我们需要与此配套的CSS。是的，很抱歉，忘了包括。您是否尝试过

.animate（{width:'toggle'}）？？？是的，当我尝试时，它按下了搜索框下方的搜索按钮。当我尝试这样做时，输入和选项框没有弯曲或调整大小，破坏了布局。另外，你错过了点
$（'.search button text'）
Melwyn，这太棒了，我喜欢它全部是CSS，没有JS。是否可以将转换幻灯片向左而不是向右，并在展开时将其推到选项框上？我已在回答中更新了上面的小提琴链接，以便搜索按下选项按钮和幻灯片，还更新了上面的html和CSS代码。检查上面答案中的新小提琴链接\m/
    $(".search-button").hover(function() {
        $('search-button-text').style.display = 'block-inline';
   });

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

<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>

        *{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;}