如何在点击按钮上动画搜索框？

我已经创建搜索框与搜索按钮，但我希望搜索框只有当我点击搜索按钮与动画（切换或其他...）像http://prntscr.com/tijo4，网站：http://thenextweb.com/可见。如何在点击按钮上动画搜索框？

HTML：

<div id="search"> 
     <input title="Search for..." id="forsearch" type="text" class="forsearch_products"> 
     <input class="search-button" type="submit" value="Search"> 
    </div>

CSS：

#search { 
    width: 250px; 
    height: 28px; 
    background-color: #C7D7E8; 
    padding: 6px 0 6px 0px; 
} 

input#forsearch.forsearch_products { 
    width: 135px; 
    height: 18px; 
    border: 2px solid #6B9DD3; 
    margin: 0 3px 0 8px; 
    float: left; 
    padding: 3px; 
} 

input.search-button { 
    width: 85px; 
    height: 28px; 
    border: 1px solid white; 
    font-size: 12px; 
    display: block; 
    float: left; 
    font-weight: bold; 
    color: white; 
    background: rgb(237,173,113); 
}

来源

2013-02-20 Mirko Mukaetov

如果在本地JavaScript这样做，那么'setInterval'功能是你应该看看。如果你可以使用像jQuery/Dojo/MooTools /等库，这个问题就变得微不足道了。 – Default 2013-02-20 21:54:46

@默认我在网站上使用jQuery，但我不是很熟悉自定义js – 2013-02-20 22:00:08

使用jQuery，这是非常简单的。使用此代码将在您的搜索框消失（我已经适应了最初隐藏）在搜索按钮的点击：

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

Check out this fiddle看到它在行动。我也调整了搜索框的位置，将其固定在右侧（如果删除了我的样式更改，但将搜索框保留为最初隐藏状态，您可以看到为什么。您也可以通过check out this page了解关于jQuery Effects的更多信息。

来源

2013-02-20 22:05:26 Default

这将提交表单之前，用户甚至可以键入它。 – j08691 2013-02-20 22:14:39

谢谢，我做到了：http://jsfiddle.net/JHdzd/3/ – 2013-02-20 22:38:59

@ j08691我意识到这一点，但Mirko要求在问题中搜索框在点击搜索按钮后可见。有很多方法可以把它连接起来，所以表单的提交方式不同。不要认为这是最好的想法，只是解决这个问题。 – Default 2013-02-21 00:46:48

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

看到演示http://cssdesk.com/Gsedv

来源

2014-06-26 10:04:06

如何在点击按钮上动画搜索框？

回答

相关问题