使用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 () {      
    document.getElementById('loading').innerHTML='';
});

Answer 2

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

Answer 3

使用此代码。

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

});

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();
});