jquery - 通过旋转 DIV 控制列表的位置

Question

我有一个长期目标，并且正在慢慢地朝着它迈进，但我需要很多帮助，还不知道自己在做什么？

请看一下这个 fiddle :http://jsfiddle.net/bloodygeese/vjU5b/27/

我的最终目标是让红色方 block 控制列表的位置，就像当正方形向右旋转时(顺时针方向列表向下移动以在蓝色框区域内显示新的文本行，然后当到达列表末尾时，运动将反转，正方形将向左旋转(逆时针方向) )并且列表将向上滑动以在蓝色框中显示一行文本，我真正希望能够学习的是如何使用鼠标在红色方 block 周围拖动来旋转方 block 并上下滑动列表并卡入到位，以便文本位于蓝色框中。

目前我无法让列表随着方 block 旋转而继续移动，它只会移动一次，从那时起我不知道如何让它反转或如何使用鼠标拖动来控制它。

任何指示/帮助将不胜感激。

Answer 1

要让列表继续移动，您需要:

$('#list').animate({top : "+=20px"}, {duration:500})

而不是

 $('#list').animate({top : "=120px"}, {duration:500})

第二个语句只会将其定位到 top:120px，而第一个语句每次点击都会将位置减少 20px

为了改变方向，你可以这样做 jsfiddle