代码之家 › 专栏 › 技术社区 › Deadpool

使用javaScript停止旋转器-SpinJs

spinner jquery javascript

Deadpool · 技术社区 · 9 年前

我可以开始旋转,但不知道如何停止。请帮助:

//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>

参考:

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

5 回复 | 直到 9 年前

Shoaib Konnur 9 年前

使用此代码。

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

});

Artem Dudkin 9 年前

例如,只要摧毁它,它就会消失

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

Davebra 9 年前

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

Shoaib Konnur 9 年前

//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>

Azad 9 年前

使 var spnr 为了访问这两种功能,

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


----------

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