循環通過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的類動畫

回答

相關問題