Question

我的页面上有4个按钮，其类名为.loadingButton，一旦点击就会旋转一个旋转圈，但不知何故，第一个按钮是唯一一个在点击时动画的按钮。我错过了什么吗？ 我只在代码段中包含了两个按钮

＆＃13;

$(function(){
    
   var loadBtn = document.querySelector('.loadingButton');
    
   var redir= function() {
        loadBtn.innerHTML = "Go Mobile";
        loadBtn.classList.add('spinning');
        
      setTimeout( 
            function  (){  
                loadBtn.classList.remove('spinning');
                loadBtn.innerHTML = "Go Mobile";
                
            }, 12000);
    }
    
    loadBtn.addEventListener("click", redir, false);
});

＆＃13;

/*button loading*/
.loadingButton {
  display: inline-block;
  outline: none;
  position: relative;
  -webkit-transition: padding-right 0.3s ease;
  transition: padding-right 0.3s ease;
}
.loadingButton.spinning {
  padding-right: 40px !important;

}
.loadingButton.spinning:after {
  content: '';
   font-size:14px !important;
  right: 6px;
  top: 50%;
  width: 0;
  height: 0;
  box-shadow: 0px 0px 0 1px #fff;
  position: absolute;
  border-radius: 50%;
  -webkit-animation: rotate360 .5s infinite linear, exist .1s forwards ease;
          animation: rotate360 .5s infinite linear, exist .1s forwards ease;
}
.loadingButton.spinning:before {
  content: "";
  width: 0px;
  height: 0px;
  border-radius: 50%;
  right: 6px;
  top: 50%;
  position: absolute;
  border: 2px solid #fff;
  border-right: 3px solid #fff;
  -webkit-animation: rotate360 .5s infinite linear, exist .1s forwards ease ;
          animation: rotate360 .5s infinite linear, exist .1s forwards ease ;
}
@-webkit-keyframes rotate360 {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes exist {
  100% {
    width: 15px;
    height: 15px;
    margin: -8px 5px 0 0;
  }
}
@keyframes exist {
  100% {
    width: 15px;
    height: 15px;
    margin: -8px 5px 0 0;
  }
}
.mybutton {
    background-color: #F89011;
    padding: 9px;
    font-size: 20px !important;
    color: white !important;
    width: 147.578px;
    height: 43px;
    position: relative;
    right: -98px !important;
    float: right !important;
}
input.radius,input.maps,input.diy,input.ctc  {
    height: 43px;
    width: 410px !important;
    background-color:#EFEFEF !important;
    text-indent: 10px !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <input class="radius" id="presale-url" placeholder="Enter URL" type="url" name="site_url" required="">
 <button type="button" id="presale-button" class="1921549220 loadingButton mybutton">
  Go&nbsp;Mobile
 </button>


 <input class="radius" id="presale-url-dt" placeholder="Enter URL" type="url" name="site_url" required="" style="background-color:white !important;">
 <button type="button" id="presale-button-dt" class=" loadingButton mybutton">
  Go&nbsp;Mobile
 </button>

＆＃13;

Answer 1

我认为我们可以稍微简化一下你的JavaScript。像这样：

＆＃13;

$(".loadingButton").click(function(){
    $(this).addClass("spinning")
    setTimeout(function(){ $(".loadingButton").removeClass("spinning") }, 12000);
});

＆＃13;

/*button loading*/
.loadingButton {
  display: inline-block;
  outline: none;
  position: relative;
  -webkit-transition: padding-right 0.3s ease;
  transition: padding-right 0.3s ease;
}
.loadingButton.spinning {
  padding-right: 40px !important;

}
.loadingButton.spinning:after {
  content: '';
   font-size:14px !important;
  right: 6px;
  top: 50%;
  width: 0;
  height: 0;
  box-shadow: 0px 0px 0 1px #fff;
  position: absolute;
  border-radius: 50%;
  -webkit-animation: rotate360 .5s infinite linear, exist .1s forwards ease;
          animation: rotate360 .5s infinite linear, exist .1s forwards ease;
}
.loadingButton.spinning:before {
  content: "";
  width: 0px;
  height: 0px;
  border-radius: 50%;
  right: 6px;
  top: 50%;
  position: absolute;
  border: 2px solid #fff;
  border-right: 3px solid #fff;
  -webkit-animation: rotate360 .5s infinite linear, exist .1s forwards ease ;
          animation: rotate360 .5s infinite linear, exist .1s forwards ease ;
}
@-webkit-keyframes rotate360 {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes exist {
  100% {
    width: 15px;
    height: 15px;
    margin: -8px 5px 0 0;
  }
}
@keyframes exist {
  100% {
    width: 15px;
    height: 15px;
    margin: -8px 5px 0 0;
  }
}
.mybutton {
    background-color: #F89011;
    padding: 9px;
    font-size: 20px !important;
    color: white !important;
    width: 147.578px;
    height: 43px;

    position: relative;

    float: right !important;
}
input.radius,input.maps,input.diy,input.ctc  {
    height: 43px;
    width: 410px !important;
    background-color:#EFEFEF !important;
    text-indent: 10px !important;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<input class="radius" id="presale-url" placeholder="Enter URL" type="url" name="site_url" required="">
 <button type="button" id="presale-button" class="1921549220 loadingButton mybutton">
  Go&nbsp;Mobile
 </button>


 <input class="radius" id="presale-url-dt" placeholder="Enter URL" type="url" name="site_url" required="" style="background-color:white !important;">
 <button type="button" id="presale-button-dt" class="loadingButton mybutton">
  Go&nbsp;Mobile
 </button>

＆＃13;

选择单击的按钮以使用类进行动画处理

1 个答案: