循环通过jQuery的类动画

enter image description here 循环通过jQuery的类动画

我试图创造一个如果单击按钮兜圈子的路径和大小的改变动画的动画。我不确定我将如何循环下一次点击课程？

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>

如果有人可以帮助我，我会非常感激:)

谢谢

来源

2016-04-26 Shaun

当你说“就下点击”，你的意思是你想要做的每次点击或一个过渡的第一个完整序列点击然后重置它？ –

嗨，我的目标是每次点击圈子都会交换课程。如果您转到我提供http://bluemoontesting.co.uk/bluemoon2016/people.html的链接并点击“动画”，您会看到它们的动画是大小和位置。我希望这基本上保持循环，所以与文本的圆圈将四处走动。希望这是有道理的！ – Shaun

保持循环没有按钮点击，你的意思是？ – dtanders

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

});

来源

2016-04-27 13:50:46

这是完美的！谢谢你帮助我:) – Shaun

嗨，再次感谢帮助我。真的很感激它。我想知道你是否可以给我一个关于如何进一步发展的见解。我真正想做的事情是，当用户点击该圈子时，它会转到班级'#c'，其他圈子随之旋转。有没有一个明显的方法来做到这一点？还是真的很难？ – Shaun

你可以只使用的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); 
});

来源

2016-04-27 13:51:54 dtanders

循环通过jQuery的类动画

回答

相关问题