添加到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 div。我可以在slide<direction> jquery事件中这样做吗?或者有其他方法可以这样做吗？

Answer 1

工作演示：小提琴

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

    });

 });

});

Answer 2

如果您需要按一下div(..lab zone)上的幻灯片，请检查此小提琴http://jsfiddle.net/vDvUn/2/。

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

});

Answer 3

下面是一个使用一些动画的工作示例:)

http://jsfiddle.net/tLttL/1/

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

})；