Can anyone assist me with this issue? I have created a jsfiddle with an example.
In summary, I am trying to rotate an "orange dart" in a circle every time the user clicks on a link. The rotation works fine, but the problem is that the "orange dart" always starts at 0 degrees instead of continuing from its last position.
Note: This issue is not present in Firefox. Here is a snippet of the code:
HTML
<div id="dart"></div>
<span class="btn js_update1">1</span>
<span class="btn js_update2">2</span>
<span class="btn js_update3">3</span>
<span class="btn js_update4">4</span>
<span class="btn js_update5">5</span>
<span class="btn js_update6">6</span>
JS
to_degree = 0;
var arc_params = {
center: [218,218],
radius: 177,
start: 360,
end: 0,
dir: -1
}
$('.js_update1').on('click', function() {
from_degree = to_degree;
to_degree = 0;
startChange('freccia_orange',from_degree,to_degree);
arc_params.end = 360;
if (arc_params.start > 360 )
{
arc_params.dir = -1;
}
else {
arc_params.dir = 1;
}
$("#dart").animate({path : new $.path.arc(arc_params)},980);//end: 0
arc_params.start = 360;
});
$('.js_update2').on('click', function() {
from_degree = to_degree;
to_degree = 60;
startChange('freccia_orange',from_degree,to_degree);
arc_params.end = 300;
if (arc_params.start > 300 )
{
arc_params.dir = -1;
}
else {
arc_params.dir = 1;
}
$("#dart").animate({path : new $.path.arc(arc_params)},980);//end: 0
arc_params.start = 300;
});
/* Remaining click functions for degrees 120, 180, 240, and 300 */