Анимация между различными размерами шрифта при нажатии ввода - PullRequest
Новая
       52

Анимация между различными размерами шрифта при нажатии ввода

1 голос
/ 11 июля 2019

У меня при щелчке появляется форма, размер шрифта уменьшается в пикселях. Я хочу, чтобы он переключался назад при нажатии другого входа. Прямо сейчас, это просто уменьшает размер пикселя при щелчке по входу, но когда я щелкаю по другой области ввода, предыдущий ввод остается прежним. Я хотел бы, чтобы это вернулось, это обычный размер пикселя. 

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

1 Ответ

1 голос
/ 11 июля 2019

Вы можете поцарапать идею «щелкнуть» и использовать «размытие» и «фокус».С моей идеей, ввод всегда будет возвращаться к обычному размеру, когда вы не сфокусированы на нем. 

    
    $(".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">
...