jQuery 动画 - 按坐标移动框

Posted 2023-03-06

【中文标题】jQuery 动画 - 按坐标移动框

【英文标题】：jQuery animation - move a box by coordinates

【发布时间】：2016-11-10 05:40:52

【问题描述】：

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

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

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

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

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

提前谢谢你

【参考方案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()

    );
);

【讨论】：

我不会使用 javascript 来为这么简单的东西制作动画。使用 CSS 可以轻松完成。

@David Wester 怎么样？只是 CSS？

看看这个链接kirupa.com/html5/animating_movement_smoothly_using_css.htm

@BhimeshChauhan 有没有机会指定运动轨迹？假设我想要进行弧线运动。有可能吗？

@AlexF 我认为有多种方法可以做到这一点。但是，据我所知，更清洁的方法是由 tobias 编写的。链接 - tobiasahlin.com/blog/curved-path-animations-in-css

【参考方案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。

【讨论】：

这是一个了不起的解决方案，但不幸的是我无法使用它。当我在做面向移动的项目时，Opera mini 不支持“过渡”。无论如何，非常感谢您的努力！

@AlexF 是的，Opera Mini 比 IE 还要糟糕。我不再支持它，因为我所有流量中只有大约 0.5% 来自歌剧 Mini。相反，我显示他们应该使用另一个浏览器的消息，但如果您不想使用它，我可以理解，因为根据 CanIuse 的说法，5% 的互联网用户使用 Opera Mini。