Javascript 展开框搜索时使平滑

单击searc按钮时，我有一个简单的代码展开框 这里是html代码

<a id="displayText" href="javascript:toggle();"><img src="images/search.png"></a>
<div id="toggleText" style="display: none;">
<form>
<input type="text" name="" placeholder="search">
</form> 
</div>

N我的js代码：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script language="javascript"> 
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
        ele.style.display = "none";

}
else {
    ele.style.display = "block";

}
} 
</script> 

函数切换（）{
var ele=document.getElementById（“toggleText”）；
var text=document.getElementById（“displayText”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
}
否则{
ele.style.display=“块”；
}
} 

---

工作正常，但我希望扩展时效果平滑，请帮助我，谢谢

我建议查看css转换，这些转换非常平滑。 使用不透明度或最大宽度，而不是显示无/块

使用“最大宽度”（max width），将其设置为0，然后设置任意宽度，并应用一个过渡，以便可以设置其移动速度、延迟等。这样，它将从侧面滑出

或者您可以将不透明度设置为0，然后设置为1，然后它将淡入

我刚才做的一个例子是这个易趣商店标题中的表单，你可以检查代码，看看我是如何做的，并调整它以适应

---

首先设置您的css（您可以更改转换的持续时间）：

然后将您的HTML更改为：

<button id="displayText"><img src="images/search.png"></button>
<div id="toggleText">
    <form>
        <input type="text" name="" placeholder="search">
    </form> 
</div>

---

有没有jQuery？你可以给我两者，有没有jQuery，对我来说都很好。谢谢我建议你阅读这个问题的答案。我只想在javascript上编辑我上面的代码，仍然可以或不可以。谢谢：）我只想在javascript上编辑我上面的代码，仍然可以或不可以。谢谢：）@wildasagta你删除了

display:none

在

#toggleText

？@wildasagata我更新了答案，这应该行得通！工作正常，但在单击按钮之前有空间，因为框搜索我希望在单击按钮搜索时，搜索框位于按钮搜索的左侧

<button id="displayText"><img src="images/search.png"></button>
<div id="toggleText">
    <form>
        <input type="text" name="" placeholder="search">
    </form> 
</div>

$("#displayText").click(function() {
    $("#toggleText").toggleClass("focused");
});