使用CSS動畫在頂部移動搜索框

Question

我需要在用戶關注它時移動我的搜索框。我正在使用CSS動畫，這是工作，但不能正常工作。我想讓當前的搜索框向上移動，但現在看起來新的搜索框正在取代當前的搜索框。

$('input').focus(function(){ 
 
$('.search').addClass('fixed'); 
 
}) 
 

 
$('input').blur(function(){ 
 
$('.search').removeClass('fixed'); 
 
})

body{ 
 
    margin:0 
 
} 
 
.banner{ 
 
    height:200px; 
 
    background:#ff0000 
 
} 
 
.search{} 
 
.search-bar{ height:50px; background:#666; padding-top:10px} 
 
.search-bar input{width:100%; height:35px} 
 
.animated{background:#fff; opacity:0; position:fixed; bottom:0; height:0px; transition:height 0.5s; width:100%} 
 
.fixed .animated{ height:100%; opacity:1}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div> 
 
    <div class="banner"> 
 
    
 
    </div> 
 
    <div class="search"> 
 
    <div class="search-bar"> 
 
     <input type="text"> 
 
    </div> 
 
    <div class="animated"> 
 
     <div class="search-bar"> 
 
     <input type="text"> 
 
    </div> 
 
     
 
    </div> 
 
    </div> 
 
    <div class="body"> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p> 
 
    <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
 
    </p> 
 
    <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
 
    </p> 
 
    <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
 
    </p> 
 
    <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
 
    </p> 
 
    <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
 
    </p> 
 
    </div> 
 
</div>

Answer 1

在這裏，使用具有相同的動畫的樣本僅1搜索框（輸入）

$('input').focus(function(){ 
 
    $('.search').addClass('fixed'); 
 
}) 
 

 
$('input').blur(function(){ 
 
    $('.search').removeClass('fixed'); 
 
})

html, body { 
 
    margin: 0 
 
} 
 
.banner { 
 
    height: 200px; 
 
    background: #ff0000 
 
} 
 
.search-bar { 
 
    height: 50px; 
 
    background: #666; 
 
    padding-top: 10px 
 
} 
 
.search-bar input { 
 
    width: 100%; 
 
    height: 35px 
 
} 
 
.search { 
 
    transition: bottom 0.5s, top 0.5s; 
 
    background: #ddd; 
 
    width: 100%; 
 
    min-height: 50px; 
 
    top: 200px; 
 
    bottom: 40%; 
 
} 
 
.search.fixed { 
 
    transition: bottom 0.5s, top 0.5s; 
 
    top: 0; 
 
    bottom: 0; 
 
    position: fixed; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div> 
 
    <div class="banner"> 
 

 
    </div> 
 
    <div class="search"> 
 
    <div class="search-bar"> 
 
     <input type="text"> 
 
    </div>  
 
    </div> 
 
    <div class="body"> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p> 
 
    <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
 
    </p> 
 
    <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
 
    </p> 
 
    <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
 
    </p> 
 
    <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
 
    </p> 
 
    <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
 
    </p> 
 
    </div> 
 
</div>