jQuery 动画 - 按坐标移动框

Question

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

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

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

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

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

提前谢谢你

Answer 1

您可以在将初始位置设置为绝对位置后尝试使用动画功能。另一方面，您可以复制 div 并删除原始内容，然后使用 jQuery 的 animate 函数将其移动到新坐标。

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 animate。使用 CSS 更容易，而且看起来也更流畅。

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

.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。

当您希望动画开始时，您只需将类添加到 div。当您单击它时，以下代码会将类添加到 div：

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

您确实需要更改选择器，现在它将适用于您页面中的每个div。