цикл через классы на 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 анимировать

ответ

Смежные вопросы