Question

所以我目前在我的页面上有一些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="&#x1f50e;">
</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');
        }

关于它可能无法正常工作的任何想法？

由于

Answer 1

试试这个：

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

The JSFiddle

Answer 2

你应该只用jQuery就可以做到这一点。看看显示/隐藏功能，以及幻灯片功能。

http://www.w3schools.com/jquery/jquery_hide_show.asp http://www.w3schools.com/jquery/jquery_slide.asp

如果你想平滑地打开和关闭它，那么slideToggle（）函数可能就是你想要的那样

过渡不起作用的CSS

2 个答案: