Question

我想让我的输入在悬停或对焦时改变宽度，并在离开焦点和悬停后将其更改回来。

$(document).ready(function() {

  $("#tbRegex").hover(function() {
    $(this).stop(true, false).animate({
      width: "200px"
    });
  }, function() {
    $(this).stop(true, false).animate({
      width: "40px"
    });
  });

  $("#tbRegex").focus(function() {
    $(this).stop(true, false).animate({
      width: "200px"
    });
  });

  $("#tbRegex").blur(function() {
    $(this).stop(true, false).animate({
      width: "40px"
    });
  });

});

#tbRegex{width:40px;}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>

  <body>
    <input id="tbRegex" type="text" placeholder="Text" />
  </body>

</html>

但我不知道如何判断焦点和悬停必须留下。

Answer 1

你可以使用像“isfocusedin”这样的属性并将其设置为1，在悬停时你可以检查焦点不是1

<input id="tbRegex" type="text" placeholder="Text" ishoveredin="0" isfocusedin="0" />

徘徊

if( $(this).attr("isfocusedin")!=1)
    $(this).stop(true, false).animate({
      width: "40px"
    });

工作演示：

$(document).ready(function() {

  $("#tbRegex").hover(function() {
     $(this).attr("ishoveredin",1);
    $(this).stop(true, false).animate({
      width: "200px"
    });
  }, function() {
    $(this).attr("ishoveredin",0);
    if( $(this).attr("isfocusedin")!=1)
    $(this).stop(true, false).animate({
      width: "40px"
    });
  });

  $("#tbRegex").focus(function() {
   $(this).attr("isfocusedin",1);
    $(this).stop(true, false).animate({
      width: "200px"
    });
  });

  $("#tbRegex").blur(function() {
     $(this).attr("isfocusedin",0);
    $(this).stop(true, false).animate({
      width: "40px"
    });
  });

});

#tbRegex{width:40px;}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>

  <body>
    <input id="tbRegex" type="text" placeholder="Text" ishoveredin="0" isfocusedin="0" />
  </body>

</html>

Jquery在没有队列的情况下改变悬停和焦点上的输入宽度

1 个答案: