0
내 페이지에 4 개의 버튼이 있습니다. 클래스 이름이 .loadingButton 인 경우 회전하는 원으로 클릭하면 애니메이션이 적용되지만 클릭하면 생기는 첫 번째 버튼 만 있습니다. 내가 놓친 게 있니? 나는 단지 내가 우리가 조금 자바 스크립트를 간단하게 할 수 있다고 생각 니펫에서 두 개의 버튼클래스로 애니메이션하기 위해 클릭 한 버튼 선택
$(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);
});
/*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;
}
<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 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 Mobile
</button>
이 단순화 된 코드가 확실히 작동합니다! 도와 주셔서 감사합니다. – icedoge