使用jQuery擴展onClick的輸入框

Question

我在我的頁面上有這個input[type="text"] ，我已經工作了一段時間。 我想做的是當用戶點擊它時創建它擴展的效果。 此外，我希望它在鼠標熄滅時恢復正常寬度。

我的代碼到目前為止：

 $(document).ready(function() { $("input").click(function() { var i; for (i = 250; i < 501; i++) { $(this).css("width", (i.toString + "px")) } }) }) 

 input[type="text"] { background-color: #000; color: #fff; border-radius: 10px; border-style: none; height: 50px; width: 250px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text"> 

我在這里使用了.click() jQuery函數。 是否還有其他可以檢測元素中光標的函數？ 像.cursorIn()這樣的東西，如果存在的話。

Answer 1

您可以使用transition: width ease 1s （並根據需要使用:hover psuedo元素）

見下面的演示：

 $(document).ready(function() { $("input").click(function() { $(this).css("width", "500px") }) }) 

 input[type="text"] { background-color: #000; color: #fff; border-radius: 10px; border-style: none; height: 50px; width: 250px; transition: width ease 1s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text"> 

使用純CSS，您可以使用focus psuedo元素，如下所示：

 input[type="text"] { background-color: #000; color: #fff; border-radius: 10px; border-style: none; height: 50px; width: 250px; transition: width ease 1s; } input[type="text"]:focus { width : 500px; } 

 <input type="text"> 

Answer 2

有一個CSS解決方案，使用transition與toggling類.on("click") ： 小提琴

CSS

input[type="text"] {
  background-color: #000;
  color: #fff;
  border-radius: 10px;
  border-style: none;
  height: 50px;
  width: 250px;
  transition: width .3s linear;
  -webkit-transition: width .3s linear;
}
.expand {
  width:500px;
}

HTML

<input type="text" />

jQuery的

$("input[type='text']").on("click", function(e){
  $(this).toggleClass("expand");
}

Answer 3

您可以使用mouseenter或懸停

 //Mouseenter
 $(document).ready(function() {
  $("input").on("mouseenter",function() {
    var i;
    for (i = 250; i < 501; i++) {
      $(this).css("width", (i.toString + "px"))
    }
  });
 });


 //Hover
 $(document).ready(function() {
      $("input").hover(function() {
        var i;
        for (i = 250; i < 501; i++) {
          $(this).css("width", (i.toString + "px"))
        }
    });
  });