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

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

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

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

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

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

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

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

当你想要动画开始时，你只需将类添加到div。当您单击它时，以下代码将该类添加到div：

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

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

jQuery动画 - 按坐标

2 个答案: