[英]Transition Not Working CSS
So I currently have some JQuery on my page which allows a user to click on a button, and In turn, it will open a search box. 因此,我目前在页面上有一些JQuery,它允许用户单击一个按钮,然后它将打开一个搜索框。 However, I would like my search box to slowly glide open, instead of just popping open out of now where.
但是,我希望搜索框缓慢滑动打开,而不是仅从当前位置弹出打开。 So I added a transition for 2 class's in my CSS, but they don't want to work.
因此,我在CSS中为2个类添加了一个过渡,但是它们不想工作。
Here is my HTML: 这是我的HTML:
<form class="ngen-search-form form-search" action="search" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search for games..." dir="ltr">
<input type="text" onclick="expandSearch()" readonly="readonly" class="form-search-submit" value="🔎">
</form>
CSS: CSS:
.form-search-input{
width:0px;
height:55px;
display:none;
border: 0;
outline: 0;
font-size:21px;
padding: 0px 0px 0px 20px;
color: #151515;
transition: .5s;
}
.search-input-open{
width:410px !important;
display: initial !important;
transition: .5s;
}
.form-search-submit{
width:55px;
height:45px;
border: 0;
outline: 0;
background-color:#151515;
font-size:21px;
color: white;
cursor: pointer;
text-align:center;
}
And JQuery: 和JQuery:
function expandSearch(){
$('#search-input').toggleClass('search-input-open');
}
Any ideas on how it might not be working? 关于它可能不起作用的任何想法?
Thanks 谢谢
Try this: 尝试这个:
.form-search-input{
width:0px;
height:55px;
border: 0;
outline: 0;
font-size:21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.form-search-submit{
display:inline-block;
width:55px;
height:45px;
border: 0;
outline: 0;
background-color:#151515;
font-size:21px;
color: white;
cursor: pointer;
text-align:center;
}
.search-input-open{
width:410px;
padding: 0px 0px 0px 20px;
}
You should be able to do that with just jQuery alone. 您应该仅使用jQuery就可以做到这一点。 Have a look at the show/hide functions, and also the slide functions.
查看显示/隐藏功能以及幻灯片功能。
http://www.w3schools.com/jquery/jquery_hide_show.asp http://www.w3schools.com/jquery/jquery_slide.asp http://www.w3schools.com/jquery/jquery_hide_show.asp http://www.w3schools.com/jquery/jquery_slide.asp
The slideToggle() function might be what you are looking for if you want to open and close it smoothly 如果要平滑地打开和关闭它,则可能是所需的slideToggle()函数
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.