फ़ॉन्टविंग आइकन कताई नहीं है जब jquery

Question

के साथ अप्रत्याशित रूप से एक आसान है .. मैंने चारों ओर खोज की है लेकिन इसे हल करने के लिए कुछ भी नहीं मिला।

मैं एक साधारण फ़ॉन्टवेज़ आइकन का उपयोग कर रहा हूं जो दस्तावेज़ लोड पर छिपा हुआ है। स्पिनर ठीक काम करता है अगर मैं इसे मजाक नहीं कर रहा हूं, हालांकि, अगर मैं इसे छुपा वर्ग लागू करता हूं तो मैं इसे दिखाने के लिए jquery का उपयोग करता हूं, यह आइकन प्रदर्शित होता है लेकिन यह अब एनिमेटेड नहीं है, केवल स्थिर आइकन के रूप में दिखाता है।

क्या कोई बेहतर तरीका है कि मुझे एनीमेशन काम करने के लिए इस तत्व को छिपाना चाहिए?

यहाँ आइकन

.icon-spinner { 
    display: none; 
} 
.load-animate { 
    -animation: spin .7s infinite linear; 
    -webkit-animation: spin2 .7s infinite linear; 
} 

@-webkit-keyframes spin2 { 
    from { -webkit-transform: rotate(0deg);} 
    to { -webkit-transform: rotate(360deg);} 
} 

@keyframes spin { 
    from { transform: scale(1) rotate(0deg);} 
    to { transform: scale(1) rotate(360deg);} 
} 

यहाँ एनिमेट करने के लिए सीएसएस आइकन के अंदर एक बूटस्ट्रैप बटन

<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
<i class="fa fa-spinner load-animate icon-spinner"></i> 
Action</button> 

यहाँ दिखाएँ करने के लिए jQuery है एचटीएमएल है क्लास

पर आधारित आईसीओएन

$('.icon-spinner').show(); 

Answer 1

की तरह पसंद करते हैं बस आइकन को एक अवधि के साथ लपेटें, और इसमें icon-spinner कक्षा जोड़ें।

डेमो बेला - https://jsfiddle.net/ub4xk013/1/

<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
<span class="icon-spinner"><i class="fa fa-spinner load-animate"></i></span> 
Action</button> 

आशा व्यक्त की कि मदद करता है!

Answer 2

this.your फ़ॉन्ट भयानक working.that case.add पीछा कर रहा है नहीं है ऑनलाइन स्क्रिप्ट (जे एस) और सीएसएस अपनी परियोजना को यह

$('.icon-spinner').show();

.icon-spinner { 
 
    display: none; 
 
} 
 
.load-animate { 
 
    -animation: spin .7s infinite linear; 
 
    -webkit-animation: spin2 .7s infinite linear; 
 
} 
 

 
@-webkit-keyframes spin2 { 
 
    from { -webkit-transform: rotate(0deg);} 
 
    to { -webkit-transform: rotate(360deg);} 
 
} 
 

 
@keyframes spin { 
 
    from { transform: scale(1) rotate(0deg);} 
 
    to { transform: scale(1) rotate(360deg);} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> 
 
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"> 
 
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
<i class="fa fa-spinner load-animate icon-spinner"></i> 
 
Action</button>