使用velocity.js中的svg动画制作的问题

Question

我在循环中使用velocity.js插件处理svg动画。我遇到的问题是我在循环中使用动画，当用户单击页面上的按钮时，我需要循环停止并在函数开头重新启动，因为我需要它来完成变量我已经开始了。有两个svg路径也可以旋转比例和颜色。我有变量用于查看用户是否正在使用IE，因为在某些情况下，由于某些原因以及svg填充中的颜色更改，我在IE中对于我来说缩放比例是不同的。这是我到目前为止无法正常工作，任何帮助将不胜感激：

function start() {

$star1 = $("#path1");
$star2 = $("#path2");
if (navigator.userAgent.indexOf('MSIE') != -1) {
var detectIEregexp = /MSIE (\d+\.\d+);/ //test for MSIE x.x
}
else {// if no "MSIE" string in userAgent
var detectIEregexp = /Trident.*rv[ :]*(\d+\.\d+)/ //test for rv:x.x or rv x.x where Trident string exists
}

if (detectIEregexp.test(navigator.userAgent)){ //if some form of IE
var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
}

if   ( (ieversion>=9)&&($('#pageframe').hasClass('white')) ) { 
$('#path1, #path2').css('fill','#FFFFFF');
var fill_1 = "#FFFFFF";
var fill_2 = "#FFFFFF";
var scale_1 = "[1.04]";
var scale_2 = "[1.03]"; 
}
else if  ( (ieversion>=9)&&(!$('#pageframe').hasClass('white')) ) { 
$('#path1').css('fill','#F7A800'); 
$('#path2').css('fill','##FFCF55');
var fill_1 = "#FFCF55";
var fill_2 = "#F7A800";
var scale_1 = "[1.04]";
var scale_2 = "[1.03]"; 
}
else if ( !(ieversion>=9)&&($('#pageframe').hasClass('white')) ) {
$('#path1, #path2').css('fill','#FFFFFF');
var fill_1 = "#FFFFFF";
var fill_2 = "#FFFFFF";
var scale_1 = "[1.10]";
var scale_2 = "[1.05]"; 
}
else {
$('#path1').css('fill','#F7A800'); 
$('#path2').css('fill','##FFCF55');
var fill_1 = "#F7A800";
var fill_2 = "#FFCF55";
var scale_1 = "[1.10]";
var scale_2 = "[1.05]"; 
} 

$star2.velocity({ 

fill: fill_1,
scale: scale_1
},
{ 
duration: 1200,
delay: 0,
easing: "ease-in-out",
complete: start, 
loop: true
})
.velocity("reverse");

$star1.velocity({ 
fill: fill_2,
scale: scale_2 
}, 
{ 
duration: 1200,
delay: 0,
easing: "ease-in-out",
complete: start, 
loop: true
})
.velocity("reverse");
}
}
$("#next_arrow").click(function() {    
$star1.velocity("stop", true);
$star2.velocity("stop", true);
start();
});

start();