javascript - 单击时更改搜索栏的位置

Question

我的想法是当用户单击或将光标放在搜索栏中时，将位于页面中心的搜索栏的位置更改为右上角，从而使中心部分的区域显示搜索结果.

此外，光标在转换期间应保留在搜索栏中。

这是我的 html 和搜索栏的 css

.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>

如何实现转换？

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>