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

工作演示：FIDDLE

$(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
   });
});

}）;

jquery动画附加到div

3 个答案: