Question

我创建了带搜索按钮的搜索框，但我希望只有当我点击带有动画的搜索按钮（切换或其他...）时才能看到搜索框，例如http://prntscr.com/tijo4，网站：{{ 3}}

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

Answer 1

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

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

Check out this fiddle看到它的实际效果。我还调整了搜索框的位置以固定在右侧（您可以看到为什么如果删除我的样式更改，但最初将搜索框保留为隐藏）。您还可以check out this page了解有关jQuery Effects的更多信息。

Answer 2

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

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

2 个答案: