Question

我正在尝试创建一个特定的效果 - 基本上各种元素在父元素中移动。总体意图是我有一种PONG风格的运动，其中元素与父对象的边缘碰撞并重定向自己。（甚至可能相互碰撞）。

这是我一直在研究的代码（我知道它在上面所描述的范围内无处可寻。）在这个阶段，我只是试图动画运动，然后按顺序访问新的顶部和左侧坐标确定元素是否超出了设定限制。

$(document).ready(function() {
    $('.collisionmenu li')
    .attr("left", 0).attr("top", 0)
    .attr("xforce", 10).attr("yforce", 10)
    .click(function() {
        //alert($(this).attr("top"));
        if($(this).attr("top") > 50) $(this).attr("yforce", -10);
        $(this).animate({
            left: '+=' + $(this).attr("xforce"),
            top: '+=' + $(this).attr("yforce")
        }, 100);
    });
});

我遇到的问题是top属性似乎总是设置为“0”，尽管运行了“click（）”函数的几次迭代以及相关元素的可见移动。

我假设JQuery在动画移动时不改变元素DOM属性，并且重定位数据保存在其他地方。所以我需要知道的是如何找到动画对象顺序的更新位置，我可以根据当前值/位置进行更改。

此外，正如希望从代码中清楚看到的那样，我已经将发明的属性“xforce”和“yforce”设置为每个元素，以便在有多个元素被动画时适应不同的速度。这是一种可接受的做法，还是我可能会在以后的阶段遇到问题？

我不确定这种事情是否已经可用（搜索没有产生任何结果），但诚实地说，我对理解工作比实际实现效果更感兴趣。它更像是一种学习练习。

非常感谢，如果这种描述不是特别明确，请道歉。

Answer 1

顶部和左侧不是属于css属性的属性。

试试css("left")。另请查看http://api.jquery.com/offset/和http://api.jquery.com/position/

Answer 2

你遇到的问题是你检查一个永远不会改变的属性。你真正想要的是检查元素的最高值。使用css属性执行此操作。

if($(this).css("top") > 50) $(this).attr("yforce", -10);

建议

始终使用css("top")代替.attr("top")，因为您正在尝试做同样的事情。

另外，我会使用.data("yforce", 10)来存储您的力值。没有理由为此改变元素的属性。

Answer 3

您是否看过http://raphaeljs.com/

向下滚动并查看演示。如果我理解正确的话，那里有一个与你想要达到的目标接近的东西。

JQuery Animate功能。访问新的“顶部”和“左侧”值

3 个答案:

建议