jQuery 动画 - 按坐标移动方块

Question

我有一个 <div> 和 position: absolute:

<div style="top:200px; left:400px;">

我希望它能很好地慢慢移动到新的坐标例如：

<div style="top:100px; left:500px;">

哪个jQuery动画效果可以做到这一点？或者有其他解决方案吗？

提前致谢

Answer 1

您可以在将初始位置设置为绝对位置后尝试使用动画功能。另一方面，您可以复制 div 并删除原件，然后使用 jQuery.

中的动画功能将其移动到新坐标

jQuery(".container").click(function() {

var position1 = jQuery("#position1").position();
alert(position1.top + ', ' + position1.left);

var position2 = jQuery(this).position();
alert(position2.top + ', ' + position2.left);

});

然后

$('.container').click(function(){
    var position1 = $('#position1').position();

    $(this).animate({ 'top': position1.top + 'px', 'left': position1.left + 'px'}, 150, function(){

    });
});

Answer 2

你不应该为此使用 jQuery 动画。用 CSS 做起来更容易，而且看起来也更流畅。

您创建了一个具有以下属性的 class：

.animate{
    transform: translate(50px, 100px);
    transition: 1s ease-in-out;
}

translate()中的第一个值是向右移动的像素数量，第二个是向下移动的像素数量。

所以如果我们使用你给我们的例子，它应该是：

.animate{
    transform: translate(100px, -100px);
    transition: 1s ease-in-out;
}

transition 上的 1s 是动画将花费的总秒数。你可以在这里使用小数。

ease-in-out 是动画的动画方式。您可以找到完整列表 here.

当您想要开始播放动画时，只需将 class 添加到 div。以下代码将在您单击时将 class 添加到 div：

$( "div" ).click(function() {
  $("div").addClass("animate");
});

您确实需要更改选择器，现在它会在您页面中的每个 div 上工作。

jQuery 动画 - 按坐标移动方块

jQuery animation - move a box by coordinates

css

jquery

css-transitions

css-animations

jquery-animate