时间戳

首页 > 解决方案 > 动画完成后元素消失jquery

javascript - 动画完成后元素消失jquery

问题描述

由于某种原因，当动画完成时，元素消失了。

    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>

当我们点击一​​个按钮时，它首先检查输入字段是否为空，如果是，则字段的边框颜色变为红色，并且应该执行摇动动画。

标签： javascripthtmlcss

解决方案

该.toggle()方法隐藏或显示一个元素。因此，在您的情况下，元素是可见的，然后被切换为隐藏。要使其缩小然后增长，您需要.toggle()在第一个动画完成后再次调用。

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>

推荐阅读