相对“位置：绝对”坐标之间的动画对象

Posted 2023-05-08

【中文标题】相对“位置：绝对”坐标之间的动画对象

【英文标题】：Animate object between relative "position:absolute" coordinence

【发布时间】：2015-09-21 21:52:17

【问题描述】：

我有一个盒子在这个位置

position:absolute;
right:20px;
top:10px;
cursor:pointer;

当我点击它时，我希望它在这个位置

position:absolute;
right:unset;
left:500px;
top:10px;
cursor:pointer;

如此处所示： http://jsfiddle.net/syogua8o/1/

这部分很简单，困难的部分是让它在这些位置之间设置动画。我希望对象在这两点之间获得缓动。我不知道该怎么做。只要我在动画时可以在视口边缘左侧 20 像素和右侧 500 像素，任何东西都可以工作。我需要它相对于视口边缘。

【参考方案1】：

您可以在计算出css 之后设置left 和width，并添加一个css 过渡。不会处理窗口调整大小，但您可以添加一个重做计算的函数。

$("box").css('left', $('box').position().left+'px')
$("box").css('width', $("box").width()+1)

$("box").click(function () 
    $("box").toggleClass("newpos");

);

box 
    position:absolute;
    background:red;
    right:20px;
    top:10px;
    cursor:pointer;
    transition: left 2s ease-out;

box.newpos 
    right:unset;
    left:500px !important;

http://jsfiddle.net/q8a1sjtx/1/

【参考方案2】：

我现在正在使用动画听，你可以看到我提供了正确的 0px，因为如果你提供 500px 和 position:absolute;那么它仍然会在那个位置这只是一个如何动画的例子，现在你可以在这个动画函数中提供左或任何你想要的样式。

即使你也可以提供 css 然后动画 using jQuery .animate to animate a div from right to left?

请参阅上面的动画链接。

或者你也可以使用 jquery ui

为此，请参阅此链接http://jsfiddle.net/kevalbhatt18/oxL8vanw/

这些都是您如何使用不同模式制作动画的参考，您可以看到 Julien Grégoire 为您提供的 css 解决方案也不错

---

见这个例子：http://jsfiddle.net/kevalbhatt18/syogua8o/3/

   $("box").click(function () 

    $("box").animate(
        right: "0px"
    ,'slow');
);