Zyklus durch Klassen auf JQuery animieren

Question

enter image description here

Ich versuche, eine Animation zu erstellen, wo, wenn Sie auf die Schaltfläche die Kreise um den Pfad und ändert die Größe animieren klicken. Ich bin mir nicht sicher, wie ich die Klassen beim nächsten Klick durchlaufen würde.

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

Ich bin mit einem svg und haben die Elemente mit diesem bisher gezielt:

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

Wenn jemand mir helfen könnte ich :)

Dank sehr dankbar sein würde

Answer 1

Ich würde einen etwas anderen Ansatz nehmen. Anstatt Klassen zu wechseln, um sie auf mehr als zwei Positionen zu verschieben, müssen Sie stattdessen die Klassen umschalten, die den einzelnen Elementen zugewiesen sind. Wenn Sie die Klassennamen in einem Array speichern, können Sie sie im Array verschieben, um die Position zu durchlaufen, in der sich jedes Element befindet. Ich habe eine simplified example erstellt.

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

Sie könnten nur setInterval verwenden wie so:

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); 
});