クリックしたときに検索バーの位置を変更する

Question

私は、ユーザーが検索バーにカーソルをクリックまたは配置すると、ページの中央にある検索バーの位置を右上隅に変更することを考えています検索結果を表示するための中央部分の作成領域。

また、カーソルは遷移中に検索バーに残ります。

これは私のhtml、および検索バー

.search-container{ 
 
    position: absolute; 
 
    width: 630px; 
 
    height: 100px; 
 
    z-index: 15; 
 
    top: 50%; 
 
    left: 37%; 
 
    margin: -100px 0 0 -140px; 
 
} 
 
.search-wrapper{ 
 
    position: relative; 
 
    background-color: #b2dfdb; 
 
    width: auto; 
 
    height: 15em; 
 
    text-align: center; 
 
    border: 1px solid #fff; 
 
    box-shadow: 1px 1px rgba(0,0,0,0.35); 
 
} 
 
.searchbar-wrapper{ 
 
    vertical-align: middle; 
 
    width: auto; 
 
    margin: 20px; 
 
    margin-top: 70px; 
 
} 
 
.search-bar{ 
 
    float: left; 
 
    width: 400px; 
 
    line-height: 30px; 
 

 
}

<div class="search-container" id="mainpage-search"> 
 
     <div class="search-wrapper"> 
 
      <div class="searchbar-wrapper"> 
 
       <div class="row"> 
 
        <div class="search"> 
 
         <form class="form"> 
 
          <div class="col-lg-8 col-md-8"><input class="search-bar" type="text" placeholder="Search for Songs"/></div> 
 
          <div class="col-lg-4 col-md-4"><span class="btn btn-blue btn-lg"><input type="submit" id="submit-query" value="Submit"></span></div> 
 
          <div class="clearfix"></div> 
 
         </form> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

どのように移行を達成することができますためのCSSのですか？

Answer 1

jQuery（JavaScriptライブラリ）を使ってこれを行う方法です

$(document).ready(function(){ //when the document is fully loaded 
 

 
    $('.search-bar').click(function(){ //select your searchbar by class and onclick create a new function 
 
    var my_searchbar = $(this); //my_searchbar is how you can access your searchbar 
 
    var my_btn = $('.btn'); //get your btn 
 
    
 
    my_btn.css('display','none'); //set the css property of the submit button to "none" 
 
    
 
    //create animation -60px top and 200px left 
 
    //time is set to 1sec(1000ms) 
 
    //after the animation is finishied create new function 
 
    //in that functin make the submit button visible and animate it 500px to the left 
 
    my_searchbar.animate({ marginTop: '-60px', marginLeft: '200px'}, 1000, function() { 
 
    my_btn.css('display','block'); 
 
    $('.btn').animate({marginLeft: '500px'}, 1000); 
 
    }); 
 
    }); 
 
    
 
    
 
});

.search-container{ 
 
    position: absolute; 
 
    width: 630px; 
 
    height: 100px; 
 
    z-index: 15; 
 
    top: 50%; 
 
    left: 37%; 
 
    margin: -100px 0 0 -140px; 
 
} 
 
.search-wrapper{ 
 
    position: relative; 
 
    background-color: #b2dfdb; 
 
    width: auto; 
 
    height: 15em; 
 
    text-align: center; 
 
    border: 1px solid #fff; 
 
    box-shadow: 1px 1px rgba(0,0,0,0.35); 
 
} 
 
.searchbar-wrapper{ 
 
    vertical-align: middle; 
 
    width: auto; 
 
    margin: 20px; 
 
    margin-top: 70px; 
 
} 
 
.search-bar{ 
 
    float: left; 
 
    width: 400px; 
 
    line-height: 30px; 
 

 
}

<!-- add the jQuery library--> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="search-container" id="mainpage-search"> 
 
     <div class="search-wrapper"> 
 
      <div class="searchbar-wrapper"> 
 
       <div class="row"> 
 
        <div class="search"> 
 
         <form class="form"> 
 
          <div class="col-lg-8 col-md-8"><input class="search-bar" type="text" placeholder="Search for Songs"/></div> 
 
          <div class="col-lg-4 col-md-4"><span class="btn btn-blue btn-lg"><input type="submit" id="submit-query" value="Submit"></span></div> 
 
          <div class="clearfix"></div> 
 
         </form> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>