Question

我希望下面的for循环（动画）重复，直到所选项的左边值等于 leftLock 变量。现在，如果您点击其中一个导航项目，它们会旋转一次（45°）并停止。（查看在线演示以查看其实际情况可能会有所帮助。）

我将for循环放在另一个for循环中并让它运行8次但是当我使用console.log($(this).css('left'))检查所选项目的左侧位置时，它始终显示原始左侧value - 即使项目已移动到新位置，它也不会更新。

我感谢所有的帮助，即使有人可以告诉我，这种做法比我想象的要复杂得多。 :(不幸的是，通过阅读此处发布的许多其他问题并在Google上搜索，我找不到任何解决方案。

如果你从左到右滑动一个框，很容易得到项目在动画后的位置，因为可以使用jQuery的回调函数，但是当我尝试在我的例子中做同样的事情时，我得到太多的值。谢谢！

Edit1：我将动画循环放在另一个循环中并检查所选项目的当前位置，但是它的初始值为8 x - 它在动画持续时间内不会改变。（新行标记为粗体）

Edit2：我想我向前迈了一步，因为我仍然得到8 x相同的值但是，它显示了所选项目的新位置（也是8x）等。示例： “79.1333px 79.1333px 79.1333px 79.1333px 79.1333px 79.1333px 79.1333px 79.05px 48像素 48像素 48像素 48像素 48像素 48像素 48像素 48像素 78.7167px 79.0167px 79.0167px 79.0167px 79.0167px 79.0167px 79.0167px 79.05px“

所以我需要以某种方式过滤每个第8个值并使用if else条件检查项目位置。是否有意义？：P


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

$('a.box').click(function() {
    $(this).addClass('selected');
  for (var a=0; a < 8; a++) {
    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'));
}
});

Answer 1

您可以放置一个全局变量，然后当用户点击滚轮时，您可以将点击次数计算为所需目的地的数字。

重复for循环（动画），直到所选项目具有设置的左值

1 个答案: