我需要在用户关注它时移动我的搜索框。我正在使用CSS动画,这是工作,但不能正常工作。我想让当前的搜索框向上移动,但现在看起来新的搜索框正在取代当前的搜索框。使用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>
为什么两个输入?使用一个并移动它。 – matpol
我没有通过使用一个输入来获得动画效果 – Carlos