Я бы хотел, чтобы цикл for (анимация), приведенный ниже, повторялся до тех пор, пока левое значение выбранного элемента не станет равным переменной leftLock .Прямо сейчас, если вы нажмете на один из элементов навигации, они повернутся один раз (45 °) и остановятся.(Вероятно, полезно проверить онлайн-демонстрацию, чтобы увидеть ее в действии.)
Онлайн-демонстрация: http://goo.gl/8rDTr
Я поместил цикл for в другой цикл forи пусть он запускается 8 раз, но когда я проверяю выбранную позицию в левом положении с помощью console.log($(this).css('left')), он всегда показывает мне исходное левое значение - он не обновляется, даже если элемент переместился в новую позицию.
Я ценю любую помощь, даже если кто-то может сказать мне, что реализация этого намного сложнее, чем я думаю.:( К сожалению, я не смог найти никакого решения, прочитав много других вопросов, опубликованных здесь, и выполнив поиск в Google.
Легко получить позицию элемента после анимации, если сдвинуть прямоугольник слева направо, поскольку можноиспользовать функцию обратного вызова jQuery, но когда я пытаюсь сделать то же самое на моем примере, я получаю слишком много значений. Спасибо!
Edit1: Я помещаю цикл анимации в другой цикл и проверяю выбранныйтекущая позиция предметов, но ее 8-кратное начальное значение - оно не меняется в течение всей анимации. (новые строки выделены жирным шрифтом)
Edit2: Я думаю, что переместилшаг вперед, потому что я все еще получаю 8-кратное то же значение, но затем оно показывает новую позицию выбранного элемента (также 8-кратное) и т. д. Пример: "79.1333px 79.1333px 79.1333px 79.1333px 79.1333px 79.1333px 79.1333px 79.05px 48px48px 48px 48px 48px 48px 48px 78.7167px 79.0167px 79.0167px 79.0167px 79.0167px 79.0167px 79.0167px 79.05px "
Так что мне нужно как-тоотфильтруйте каждое восьмое значение и проверьте положение элементов, используя условие if else.Имеет ли это смысл?: P
<code>
var menu_items = Array("#box_8", "#box_7", "#box_6", "#box_5", "#box_4", "#box_3", "#box_2", "#box_1");
var menuLength = menu_items.length;
var angleDiff = 360 / menuLength;
var fin = 0;
var leftLock = "260px";</p>
<p>$('a.box').click(function() {
$(this).addClass('selected');
<b>for (var a=0; a < 8; a++) {</b>
var startAngle = 180 + fin * angleDiff;
var endAngle = 225 + fin * angleDiff;
fin++;
for (var i=0; i < menu_items.length; i++) {
startAngle += angleDiff;
endAngle += angleDiff;
$(menu_items[i]).animate({
path: new $.path.arc({
center: [154, 154],
radius: 106,
start: startAngle,
end: endAngle,
dir: 1
}),
opacity: '1'
},400, animFinished);
};
};
function animFinished() {
console.log($('.selected').css('left'));
}
});