目前我的页面上有一些 JQuery,它允许用户单击按钮,然后它将打开一个搜索框。但是,我希望我的搜索框能够慢慢地滑开,而不是直接从现在的位置弹出。因此,我在 CSS 中添加了 2 个类的转换,但它们不想工作。
这是我的 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:
.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;
}
和 JQuery:
function expandSearch(){
$('#search-input').toggleClass('search-input-open');
}
关于它可能无法工作的任何想法?
谢谢
最佳答案
试试这个:
.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;
}
关于javascript - 过渡不起作用 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34704868/