顯示效果：

隱藏效果： 

前端核心程式碼如下：

<div class="search-icon col-md-2 col-sm-2 col-xs-4 col-md-offset-5 col-sm-offset-5 col-xs-offset-4"> 
    <img src="../status/images/search.png" alt="">
</div>
<div class="search-input row">
    <div class="search-show col-md-6 col-sm-10 col-xs-10 col-md-offset-3 col-sm-offset-1 col-xs-offset-1">
        <div class="input row">
            <input type="text" class="col-md-9 col-sm-9 col-xs-9" placeholder="請輸入你想了解的內容">
            <div class="search-btn col-md-3 col-sm-3 col-xs-3">
                <div class="search-name">搜尋</div>
                <!-- <img src="../status/images/search.png" alt="" style="" /> -->
            </div>
        </div>
    </div>
</div>

css就不在這裡顯示了，可以自己定義 

下面就來說說jquery如何實現效果

顯示

$('.search-icon').fadeOut(0,()=>{
    $('.search-input').fadeIn().css({'width':'0%','position':'absolute','left':'50%'}).animate({
        'width':'100%',
        'margin-left':'-50%'
    },500,'linear',()=>{
        $('.input').fadeIn(500)
    })
})
 

隱藏

$('.input').fadeOut(700,function(){
    $('.search-input').animate({
        'width':'0%',
        'margin-left':'0%'
    },700,'linear',()=>{
        $('.search-icon').fadeIn(700)
    })
})

方法說明：