Javascript 如何在单击按钮时设置搜索框的动画？

我已经创建了带有搜索按钮的搜索框，但我希望搜索框仅在我单击带有动画的搜索按钮（切换或其他…）时可见，例如，网站：

我只试过这个：

HTML:

---

使用jQuery，这非常简单。单击搜索按钮后，使用此代码将在搜索框（我已将其调整为初始隐藏）中淡出：

$("#search").click(function(){
    $("#forsearch").fadeIn(1000);
})

看看它在起作用。我还调整了搜索框的位置，使其固定在右侧（如果删除我的样式更改，但最初将搜索框保持隐藏状态，您可以看到原因）。您还可以进一步了解jQuery效果

---

查看演示

如果您是在本机JavaScript中执行此操作，则应该研究

setInterval

函数。如果您可以使用诸如jQuery/Dojo/MooTools/等库，这个问题就变得无关紧要了。@默认情况下，我在网站上使用jQuery，但不太熟悉如何在用户输入表单之前提交表单的自定义JSP。@j08691我意识到这一点，但是米尔科在问题中要求在点击搜索按钮后搜索框可见。他可以通过多种方式将其连接起来，以便以不同的方式提交表格。不争论这是最好的主意，只是解决问题。

$("#search").click(function(){
    $("#forsearch").fadeIn(1000);
})

input[type="search"] {
     background: url("http://www.dreamtemplate.com/dreamcodes/web_icons/gray-classic-search-icon.png") no-repeat scroll 5px 50% #ffffff;
     border-radius: 4px;
     border: 1px solid #f1f1f1;
     color: transparent;
     cursor: pointer;
     font-family: Verdana,Geneva,sans-serif;
     font-size: 14px;
     padding: 12px 5px 12px 22px;
     transition: all 0.3s ease 0s;
     width: 22px;
}