Question

我的页面上有input[type="text"]，我已经工作了一段时间。我想做的是当用户点击它时创建它扩展的效果。此外，我希望它在鼠标熄灭时返回正常宽度。

到目前为止我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我在这里使用了.click() jQuery函数。是否还有其他可以检测元素中光标的函数？像.cursorIn()这样的东西，如果存在的话。

Answer 1

您可以使用transition: width ease 1s（并根据需要使用:hover伪造元素）

见下面的演示：

$(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")：fiddle

<强> 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或hover

 //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"))
        }
    });
  });

使用jQuery扩展onClick的输入框

3 个答案: