検索バーでイージーイン＆イージーアウトアニメーションが機能しない

Question

ナビゲーションバーの検索バーを表示/非表示にするための検索ボタンを簡単に作成でき、アニメーションが機能しないため、コンソールのエラーです。私は全体のHTMLコードを書いていない、これはhtmlのサンプルコードです。

$('.search-icon a').on("click", function(){ 
 
    $('body').addClass('show-search').children('.search-box-outer').slideDown(); 
 
    return false; 
 
}); 
 

 
$('.close-search').click(function(){ 
 
    $('.search-box-outer').removeClass('show-search').slideUp(); 
 
    return false; 
 
});

.search-box-outer { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 60px; 
 
    float: left; 
 
    background: #fff; 
 
    z-index: 99999999; 
 
    left: 0; 
 
    top: -60px; 
 
    transition: all 0.2s ease-in; 
 
} 
 

 
.search-box { 
 
    width: 100%; 
 
    position: relative; 
 
    padding-right: 60px; 
 
} 
 

 
.search-box .form-control, 
 
.search-box .form-control:focus { 
 
    height: 82px; 
 
    border: 0; 
 
    border-bottom: 1px solid #ccc; 
 
    box-shadow: none !important; 
 
    font-size: 24px; 
 
    border-radius: 0; 
 
} 
 

 
.close-search { 
 
    background-color: #fff; 
 
    color: #000; 
 
    width: 60px; 
 
    height: 82px; 
 
    float: left; 
 
    border-bottom: 1px solid #ccc; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    font-size: 24px; 
 
    line-height: 82px; 
 
    text-align: center; 
 
    transition: all 0.2s ease-out; 
 
} 
 

 
.show-search .search-box-outer { 
 
    top: 0; 
 
    position: relative; 
 
    z-index: 99999; 
 
    width: 100%; 
 
} 
 

 
.search-box-outer .container { 
 
    padding: 40; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 
<header> 
 
    <nav> 
 
    <ul> 
 
     <li> 
 
     <a href="home">home</a> 
 
     </li> 
 
     <li> 
 
     <a href="aboutus">aboutus</a> 
 
     </li> 
 
     <li> 
 
     <a href="contactus">contactus</a> 
 
     </li> 
 
     <li class="search-icon"> 
 
     <a href="#!"> 
 
      <i class="fa fa-search"></i> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header> 
 
<div class="search-box-outer"> 
 
    <div class="search-box"> 
 
    <form> 
 
     <input type="text" value="" class="form-control" placeholder="Type &amp; Hit Enter to Search" /> 
 
    </form> 
 
    <a href="#!" class="close-search"> 
 
     <i class="fa fa-close"></i></a> 
 
    </div> 
 
</div>

Answer 1

Iは、クラス検索ボックス外に絶対位置を変更し、クラス内のショー検索検索ボックスの外側、及びディスプレイ添加：なし、それが

働い

jqueryの

$('.search-icon a').on("click", function(){ 
     $('body').addClass('show-search').children('.search-box-outer').slideDown(); 
     return false; 
    }); 

    $('.close-search').click(function(){ 
     $('.search-box-outer').removeClass('show-search').slideUp(); 
     return false; 
    }); 

CSS

.search-box-outer{ 
    position:absolute; 
    width:100%; 
    height:60px; 
    float:left; 
    background:#fff; 
    z-index:99999999; 
    left:0; 
    top:-60px; 
    display: none!important; 
} 


.show-search .search-box-outer{ 
    top:0; 
    position: absolute!important; 
    z-index: 99999; 
    width: 100%; 
}