Question

我正在尝试创建一个动画，如果单击该按钮，则圆圈会在路径周围生成动画并更改大小。我不确定如何在下次点击时循环播放课程？

http://bluemoontesting.co.uk/bluemoon2016/people.html

我正在使用svg，并且目前已将这些元素作为目标：

<script>
$(".animate-slider").click(function() { 
$('.st7').toggleClass("top-left");
$('#XMLID_292_').toggleClass("left");
$('#XMLID_293_').toggleClass("center-right");
$('#XMLID_297_').toggleClass("top-right");
$('#XMLID_301_').toggleClass("top");
$('#XMLID_283_').toggleClass("top-center");
 });
</script>

如果有人能帮助我，我将非常感激：）

由于

Answer 1

我会采取一些不同的方法。不是切换类，而是让它移动到两个以上的位置，而是需要循环分配给每个元素的类。将类名存储在数组中将允许您在数组中移动它们以循环每个元素移动到下一个的位置。我创建了一个simplified example。

$(document).ready(function () {
  var steps = ['right', 'bottom-right', 'bottom-left', 'left', 'top'],
    allClasses = steps.join(' ');
  $('#go').click(function() {
    $('#a').removeClass(allClasses).addClass(steps[0]);
    $('#b').removeClass(allClasses).addClass(steps[1]);
    $('#c').removeClass(allClasses).addClass(steps[2]);
    $('#d').removeClass(allClasses).addClass(steps[3]);
    $('#e').removeClass(allClasses).addClass(steps[4]);
    steps.push(steps.shift()); // move first element to the end

    // to cycle in the other direction you would pop and unshift instead
    // steps.unshift(steps.pop()); // move last element to the beginning
  });

});

Answer 2

您可以像这样使用setInterval：

var $st7 = $('.st7'); //class selectors can be expensive, so cache them
function rotate() { 
   $st7.toggleClass("top-left");
   $('#XMLID_292_').toggleClass("left");
   $('#XMLID_293_').toggleClass("center-right");
   $('#XMLID_297_').toggleClass("top-right");
   $('#XMLID_301_').toggleClass("top");
   $('#XMLID_283_').toggleClass("top-center");
}

//2000 is milliseconds, so that's two seconds
var rotateIntervalId = setInterval(rotate, 2000);

//optionally consider stopping/starting the effect on mouse hover/exit
$('#Layer_1').on('hover', function() {
   clearInterval(rotateIntervalId);
}).on('blur', function() {
   rotateIntervalId = setInterval(rotate, 2000);
});

循环访问Jquery上的类以进行动画处理

2 个答案: