Jquery 通过旋转DIV来控制列表的位置

我有一个长期目标，我正在慢慢地朝着这个目标前进，但是我需要很多帮助，我还不知道我在做什么

请看一下这把小提琴：

我的最终目标是让红场控制名单的位置， 当正方形向右旋转时（顺时针方向），列表向下移动以在蓝色框区域内显示新的文本行，当到达列表末尾时，移动将反转，正方形将向左旋转（逆时针方向），列表将向上滑动以显示蓝色框内的文本行， 我真正希望能够学习的是如何使用鼠标在红方块周围拖动来旋转方块，上下滑动列表并捕捉到位，使文本位于蓝色框中

现在我无法让列表在正方形旋转时继续移动，它只移动了一次，从那以后我不知道如何让它反转，或者如何使用鼠标拖动来控制它

---

非常感谢您的指点/帮助。

要获得继续移动的列表，您需要：

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

而不是

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

第二条语句将只将其定位到top:120px，而第一条语句将在每次单击时将其位置减少20px

---

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

每次都应该改变列表的顶部，如下所示：

var top = 120;

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

---

检查一下这个如何实现的小例子。我还没有写完整的代码

---

谢谢，你知道当它达到一定程度或高度时如何将其反转吗？@user1681836我在回答中添加了解决方案，这太棒了，谢谢你，现在如果你能告诉我如何通过鼠标拖动实现同样的动作，我会将我的房子和我的第一个孩子发送给你。这需要更多的工作，我会尽快通知你（这里是凌晨4点）：）