单击按钮后无法使用spin.js显示微调器

Question

我希望在用户点击后淡出提交按钮，我想用加载图标替换它。我正在使用spin.js库

这是我的按钮：

<button type="submit" name="inscripcionUsuarioForm" id="botonSubmit" class="btn btn-primary pull-right" onclick="ocultarSubmit();" >Inscribirme ahora</button>
<div id="spinner"></div>

这是我在formularios.js

中的功能

function ocultarSubmit() {
  $('#botonSubmit').fadeOut();
var opts = {
  lines: 13 // The number of lines to draw
, length: 28 // The length of each line
, width: 14 // The line thickness
, radius: 42 // The radius of the inner circle
, scale: 1 // Scales overall size of the spinner
, corners: 1 // Corner roundness (0..1)
, color: '#000' // #rgb or #rrggbb or array of colors
, opacity: 0 // Opacity of the lines
, rotate: 0 // The rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 0.6 // Rounds per second
, trail: 60 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)
, className: 'spinner' // The CSS class to assign to the spinner
, top: '50%' // Top position relative to parent
, left: '50%' // Left position relative to parent
, shadow: true // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
}
var spinner = new Spinner(opts).spin();
$("#spinner").append(spinner.el);
} 

我正在页面的最后调用该文件：

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="/js/jquery.validate.min.js"></script>
<script src="/js/additional-methods.min.js"></script>
<script src="/js/spin.min.js"></script>
<script src="/js/formularios.js"></script>

按钮逐渐消失，但旋转轮不会出现。控制台不会显示任何错误。我能做错什么？

Answer 1

在ocultarSubmit函数之外移动opts数组，避免使用内联JS：

＆＃13;

＆＃13;

var opts = {
  lines: 13 // The number of lines to draw
, length: 28 // The length of each line
, width: 14 // The line thickness
, radius: 42 // The radius of the inner circle
, scale: 1 // Scales overall size of the spinner
, corners: 1 // Corner roundness (0..1)
, color: '#000' // #rgb or #rrggbb or array of colors
, opacity: 0.25 // Opacity of the lines
, rotate: 0 // The rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 60 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)
, className: 'spinner' // The CSS class to assign to the spinner
, top: '50%' // Top position relative to parent
, left: '50%' // Left position relative to parent
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
}
$('body').on('click', '#botonSubmit', function() {
  $(this).toggleClass('in');
  var target = document.getElementById('spinner')
  var spinner = new Spinner(opts).spin(target);  
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://spin.js.org/spin.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button type="submit" name="inscripcionUsuarioForm" id="botonSubmit" class="fade in btn btn-primary text-center">Inscribirme ahora</button>
<div id="spinner"></div>

＆＃13;

＆＃13;

＆＃13;