使用javaScript停止微调器 - SpinJs

Question

我可以启动微调器，但不知道如何停止它。请帮助：

//On button click load spinner and go to another page 
 
$("#btn1").click(function() { 
 
//Loads Spinner 
 
$("#loading").fadeIn(); 
 
var opts = { 
 
    lines: 12, // The number of lines to draw 
 
    length: 7, // The length of each line 
 
    width: 4, // The line thickness 
 
    radius: 10, // The radius of the inner circle 
 
    color: '#000', // #rgb or #rrggbb 
 
    speed: 1, // Rounds per second 
 
    trail: 60, // Afterglow percentage 
 
    shadow: false, // Whether to render a shadow 
 
    hwaccel: false // Whether to use hardware acceleration 
 
}; 
 
var trget = document.getElementById('loading'); 
 
var spnr = new Spinner(opts).spin(trget); 
 
}); 
 

 
$("#btn2").click(function() {  
 
    //Write code to stop spinner 
 

 
});

<button id="btn1">Start</button> 
 
<button id="btn2">Stop</button> 
 

 
<div id="loading"> 
 
<div id="loadingcont"> 
 
    <p id="loadingspinr"> 
 
    </p> 
 
</div> 
 
</div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js" type="text/javascript"></script>

Refernces：

http://spin.js.org/
Stop Spinner.js

Answer 1

使用此代码。

$("#btn2").click(function() {  
    //Write code to stop spinner 
    $('#loading').fadeOut(); 

}); 

Answer 2

就摧毁它，例如 - 它会消失

$("#btn2").click(function() {  
    document.getElementById('loading').innerHTML=''; 
}); 

Answer 3

$(trget).data('spinner', spnr); 
$('loading').data('spinner').stop(); 

Answer 4

//On button click load spinner and go to another page 
 
$("#btn1").click(function() { 
 
//Loads Spinner 
 
$("#loading").fadeIn(); 
 
var opts = { 
 
    lines: 12, // The number of lines to draw 
 
    length: 7, // The length of each line 
 
    width: 4, // The line thickness 
 
    radius: 10, // The radius of the inner circle 
 
    color: '#000', // #rgb or #rrggbb 
 
    speed: 1, // Rounds per second 
 
    trail: 60, // Afterglow percentage 
 
    shadow: false, // Whether to render a shadow 
 
    hwaccel: false // Whether to use hardware acceleration 
 
}; 
 
var trget = document.getElementById('loading'); 
 
var spnr = new Spinner(opts).spin(trget); 
 
}); 
 

 
$("#btn2").click(function() {  
 
    //Write code to stop spinner 
 
    $('#loading').fadeOut(); 
 
});

<button id="btn1">Start</button> 
 
<button id="btn2">Stop</button> 
 

 
<div id="loading"> 
 
<div id="loadingcont"> 
 
    <p id="loadingspinr"> 
 
    </p> 
 
</div> 
 
</div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js" type="text/javascript"></script>

Answer 5

使var spnr用于访问这两种功能，

spnr = new Spinner(opts).spin(trget); 


---------- 

$("#btn2").click(function() {  
    //Write code to stop spinner 
    spnr.stop(); 
});