CODEWITHSUNDEEP
jqueryjquery-animatetogglefont-size
User1990
User1990

Reputation: 85

Animate between different font sizes when input is clicked

I have a form when clicked the font size reduces pixels. I want it to toggle back when another input is clicked. Right now, it's just reducing the pixel size when an input is clicked, but when I click on another input area the previous input stays the same. I'd like it to return it it's regular pixel size. 

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

Upvotes: 1

Views: 45

Answers (1)

user11698627
user11698627

Reputation:

You could scratch the idea of "click" and use "blur" and "focus". With my idea, the input will always return back to regular size when you're not focused on it.

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

If you want it, however, to return back to its normal size strictly when another input is clicked, this should do it:

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

Upvotes: 1

Related Questions