Question 308576 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

I am Running simple JQuery with Keyup event and animation but my animation is not working, why?

I have this simple JQuery addition program with animation on keyup event of 2nd #num2 input type text, I am getting proper answer but animation is not showing.

$(document).ready(function() {
  $('#num2').keyup(function() {

    let num1 = parseFloat($('#num1').val());
    let num2 = parseFloat($('#num2').val());

    if (!isNaN(num1) && !isNaN(num2)) {
      let sum = num1 + num2;
      $('#add').text(sum);
      $('#add').slideDown(4000);
    } else {
      $('#add').text("Please enter valid numbers");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>


<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<h3 id="add"></h3><br/>
<h3 id="sub"></h3><br/>
<h3 id="mul"></h3><br/>
<h3 id="div"></h3><br/>
Tags:

2

Answers


  1. 0

    If I understood you correctly, you want to display the addition result with the animation effect of slideDown. The issue I am seeing here is that when you add the text to the h3, it’s already down the input elements. Sliding it down will not take it anywhere else. If you want the animation of slideDown to work, probably, you can slideUp first and then slide it down.

    I have added h3 for showing the error because using the same h3 for showing the sum and the error message may not give you the right effect (at least in my opinion; I welcome others to correct me here)

    I tried to show here how it will work:

    <!DOCTYPE html>
<html>
<head>
  <title>Addition using jQuery</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="number" id="num1" placeholder="Enter first number">
  <input type="number" id="num2" placeholder="Enter second number">
  <h3 id="add"></h3><br/>
  <h3 id="error"></h3>
  <h3 id="sub"></h3><br/>
  <h3 id="mul"></h3><br/>
  <h3 id="div"></h3><br/>

  <script>
    $(document).ready(function() {
      $('#num2').keyup(function() {
        $('#error').text('');
        let num1 = parseFloat($('#num1').val());
        let num2 = parseFloat($('#num2').val());
        $('#add').slideUp();
        if (!isNaN(num1) && !isNaN(num2)) {
          let sum = num1 + num2;
          $('#add').text(sum);
          $('#add').slideDown();
        } else {         
          $('#error').text("Please enter valid numbers");
        }
    });
    
    });
    
  </script>
</body>
</html>
    Login or Signup to reply.
  2. 0

    Since the element is visible at all time, slideDown() won’t give any visible changes.

    Make sure to either do a slideUp() or hide() at the start of your keyup event, so that when your slideDown() happens, it can add the sliding effect you are looking for.

    Also, add display:none to your elements in which you are going to show the output.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search