如何在按钮单击动画搜索框？ [英] How to animate search box on button click?

问题描述

我已经创建一个搜索按钮搜索框，但我想在搜索框中可见，只有当我在搜索按钮单击动画（切换或东西...）喜欢的 http://prntscr.com/tijo4 ，网站：的http：/ /thenextweb.com/ 。

我已经试过只有这个： http://jsfiddle.net/JHdzd

HTML

 ＆LT; D​​IV ID =搜索＆GT;
        ＆LT;输入标题=搜索...ID =forsearch类型=文本级=forsearch_products＆GT;
        ＆LT;输入级=搜索键式=提交值=搜索＆GT;
    ＆LT; / DIV＆GT;
 

CSS：

 ＃搜寻{
    宽度：250像素;
    高度：28px;
    背景颜色：＃C7D7E8;
    填充：6像素0 6像素0像素;
}输入＃{forsearch.forsearch_products
    宽度：135px;
    family：宋体;
    边界：2px的固体＃6B9DD3;
    保证金：0 0 3PX加上了8px;
    浮动：左;
    填充：的3px;
}input.search键{
    宽度：85px;
    高度：28px;
    边框：1px的白色固体;
    字体大小：12像素;
    显示：块;
    浮动：左;
    字体重量：大胆的;
    颜色：白色;
    背景：RGB（237173113）;
}
 

解决方案

使用jQuery，这是很简单的。使用这种code将在搜索框消失（我已经适应了最初隐藏）在搜索按钮的点击：

  $（＃搜索）。点击（函数（）{
    $（＃forsearch）淡入（1000）。
}）
 

看看这个小提琴看到它在行动。我还调整搜索框的位置被固定在右（你可以看到为什么如果你删除我的风格变化，但保持搜索框为隐藏最初）。您也可以看看这个页面详细了解jQuery的影响。

I've create search box with search button, but i want the search box to be visible only when i click on search button with animation (toggle or something...) like http://prntscr.com/tijo4 , website: http://thenextweb.com/.

I have tried only this : http://jsfiddle.net/JHdzd

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

解决方案

With jQuery, this is very simple. Using this code will fade in your search box (which I have adjusted to be initially hidden) upon the click of your search button:

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

Check out this fiddle to see it in action. I have also adjusted your search box's position to be fixed to the right (you can see why if you remove my style changes, but leave the search box as hidden initially). You can also check out this page to learn more about jQuery Effects.

这篇关于如何在按钮单击动画搜索框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！