Question

单击后我有一个表格，字体大小减小了像素。我希望它在单击另一个输入时切换回去。现在，它只是在单击输入时减小像素大小，但是当我单击另一个输入区域时，以前的输入保持不变。我希望它返回它的常规像素大小。

$(".input-style").click(function() {
  if ($(this).css('font-size') > '20px') {
    $(this).animate({
      fontSize: '15px'
    });
  } else {
    $(this).animate({
      fontSize: '20px'
    });
  }
});

Answer 1

您可以刮擦“单击”的概念，并使用“模糊”和“焦点”。按照我的想法，当您不关注输入内容时，输入将始终返回到常规大小。

    
    $(".input-style").focus(function() {
      if ($(this).css('font-size') == '20px') {
        $(this).animate({
          fontSize: '15px'
        });      
      } else {
        $(this).animate({
          fontSize: '20px'
        });
      }
        
    });
    
    $(".input-style").blur(function() {
      if ($(this).css('font-size') == '20px') {
        $(this).animate({
          fontSize: '15px'
        });      
      } else {
        $(this).animate({
          fontSize: '20px'
        });
      }
        
    });

input {
   margin-bottom:15px;
   font-size:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="input-style">
<br>
<input type="text" class="input-style">

但是，如果您希望它在单击另一个输入时严格返回到其正常大小，则应该这样做：

$(".input-style").click(function() {
      if ($(this).css('font-size') == '20px') {
        $(this).animate({
          fontSize: '15px'
        });      
      } else {
        $(this).animate({
          fontSize: '20px'
        });
      }
        
        $("body").children().not(this).animate({
            fontSize: '20px'
        })
        
    });

.input-style {
    margin-bottom:15px;
    font-size:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="input-style">
<br>
<input type="text" class="input-style">

单击输入时在不同字体大小之间进行动画处理

1 个答案: