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

我想在用户单击submit按钮后将其淡出，并将其替换为加载图标。我在用图书馆

这是我的按钮： 我正在调用页面末尾的文件：

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

---

按钮淡出，但旋转轮不会出现。控制台不会显示任何错误。我可能做错了什么？

将opts数组移动到

ocultarSubmit

函数之外，避免内联JS：

var选项={
线条：13//要绘制的线条数
，长度：28//每行的长度
，宽度：14//线条厚度
，半径：42//内圈的半径
，缩放比例：1//缩放微调器的总体大小
，拐角：1//拐角圆度（0..1）
，颜色：'#000'/#rgb或#rrggbb或颜色数组
，不透明度：0.25//线条的不透明度
，旋转：0//旋转偏移
，方向：1//1:顺时针，-1:逆时针
，速度：每秒1//轮
，轨迹：60//余辉百分比
，fps:20//使用setTimeout（）作为CSS回退时每秒帧数
，zIndex:2e9//z索引（默认为2000000）
，className:'spinner'//要分配给微调器的CSS类
，top:'50%'//相对于父对象的顶部位置
，left:'50%'//相对于父对象的左侧位置
，shadow:false//是否渲染阴影
，hwaccel:false//是否使用硬件加速
，位置：'绝对'//元素定位
}
$（'body'）。在（'click'，'botonSubmit'，函数（）上{
$（this.toggleClass（'in'）；
var target=document.getElementById（'spinner'）
var微调器=新微调器（opts）。微调（目标）；
});

题词：阿霍拉
我制作了一个演示，它可以。。。试着在不加载其他冗余库的情况下运行它。您可能不应该在单击时调用的函数中声明spin.js options数组。。我用更干净的JS，works（我下面的答案）重新编写了它。使用它只需添加一个“s”。@Rosamunda:如果你认为答案对你有帮助，请评论/投票接受答案。
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>