jquery动画附加到div

所以我有一个网格，我想展示一个元素在网格中滑动；例如：

<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

div。我可以使用

slide

jquery事件来实现这一点，还是有其他方法可以实现这一点？

工作演示：

---

如果您需要像在div（.lab zone）上滑动一样单击，请选中此小提琴

---

下面是一个带有一些动画的工作示例：）

}))

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

    });

 });

});

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

});

$(document).ready(function () {
 $(".lab-zone ").click(function () {
    change = $(this).position();
    $('#user').animate({
        top: change.top,
        left: change.left
   });
});