は、テキストボックスの幅は、右側に延び、このコードに右側

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

それが左に幅は50pxが増加します。この

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

を試してみてください。必要に応じて値を変更してください

Answer 2

これはUX側からは間違っていますが、入力にfloat-rightクラスを入れて左に伸ばせるようにするのが簡単です。

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