想在此代码的文本框的宽度延伸到右侧文本框的宽度延伸到左侧而不是右侧

Question

的，但我想延长的宽度，以左侧没有文本框对准右侧

$("#textbox1").on('click', function() { 
 
    $("#textbox1").animate({ 
 
    width: 800 
 
    }, 'slow'); 
 
}).on('blur', function() { 
 
    $("#textbox1").animate({ 
 
    width: 245 
 
    }, 'slow'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0- 
 
alpha.6/css/bootstrap.min.css" integrity="sha384- 
 
rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-12"> 
 
     <div class="col-sm-6"> 
 
     <button id="btn1" class="btn btn-primary">button</button> 
 
     <br> 
 
     <h2 id="accordion" style="display: none;">First Example Of Jquery</h2> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <h2>Search</h2> 
 
     <input type="text" id="textbox1" name="txt" class="form-control"> 
 
     <button id="btn2" class="btn btn-primary">Search</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

试试这个

$("#textbox1").click(function(){ 
     $("#textbox1").animate({ 
      width: '+=50px', 
      left: '-50px' 
     }); 
    }); 

将宽度50像素提高到了左边。根据需要更改值

Answer 2

从UX方面来看，这是错误的，但一个快速的答案是将put float-right类放在输入上，以便它只能向左延伸。

<input type="text" id="textbox1" name="txt" class="form-control float-right">