CODEWITHSUNDEEP
javascripthtmlcss
mik elk
mik elk

Reputation: 27

element disappears after animation is complete jquery

For some reason when animation is complete, the element disappears.

    function addDoge()
    {
      var wallet_address = document.getElementById("d_address");

      if(d_address.value == "")
      {
        d_address.style.boxShadow = "0px 0px 0px 4px red";
        $("#d_address").toggle("shake");
      }
      else
      {
        d_address.style.boxShadow = null;
      }
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm col-centered">
      <div class="slider-text">
      <center>CLAIM</center>
      <center><h1>GET UP TO 1000</h1></center>
      </div>
      <div class="input-wallet">
      <input id="d_address" type="text" placeholder="WALLET ADDRESS">
      </div>
      <div class="claim_btn">
        <a type="submit" id="add" class="button" onclick="addDoge()">CLAIM</a>
      </div>
    </div>

When we click on a button, first it checks if input field is not empty, if it is , border color of field changes to red and it should perform shake animation.

Upvotes: 1

Views: 83

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65825

The .toggle() method hides or shows an element. So, in your case the element was visible and then gets toggled to be hidden. To make it shrink and then grow, you need to call .toggle() again, after the first animation is done.

function addDoge()
    {
      var wallet_address = document.getElementById("d_address");

      if(d_address.value == "")
      {
        d_address.style.boxShadow = "0px 0px 0px 4px red";
        $("#d_address").toggle("shake", function(){
          $(this).toggle();
        });
      }
      else
      {
        d_address.style.boxShadow = null;
      }
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm col-centered">
      <div class="slider-text">
      <center>CLAIM</center>
      <center><h1>GET UP TO 1000</h1></center>
      </div>
      <div class="input-wallet">
      <input id="d_address" type="text" placeholder="WALLET ADDRESS">
      </div>
      <div class="claim_btn">
        <a type="submit" id="add" class="button" onclick="addDoge()">CLAIM</a>
      </div>
    </div>

Upvotes: 1

Related Questions