附加到 div 的 jquery 动画

Question

所以我有一个网格，我想显示一个元素滑过它们；例如:

<div id="zone-1" class="lab-zone lab-left-column">
    <div id="user">
    </div>
</div>
<div id="zone-2" class="lab-zone lab-left-column">
</div>
<div id="zone-3" class="lab-zone lab-center-column">
</div>
<div id="zone-4" class="lab-zone lab-center-column">
</div>
<div id="zone-5" class="lab-zone lab-right-column">
</div>
<div id="zone-6" class="lab-zone lab-right-column">
</div>

user div 具有填充效果，我想将其移动到另一个动画 zone-x分区我可以用 slide<direction> 来做到这一点吗？ jquery 事件还是我应该这样做的另一种方法？

Answer 1

工作演示:FIDDLE

$(document).ready(function () {
 $(".lab-zone ").click(function () {
    $('#user').css("background-color", "lightblue");
    move = $(this).position();
    $('#user').animate({
        top: move.top,
        left: move.left

    });

 });

});