Question

我有一个位于此位置的方框

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

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

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

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

这部分很简单，困难的部分是让它在这些位置之间制作动画。我希望对象能够在这两点之间轻松运动。我不知道该怎么做。只要我在动画时可以向左20px并且在视口边缘右侧500px，任何功能都可以正常工作。我需要它相对于视口边缘。

Answer 1

您可以在计算left之后设置width和css并添加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/

Answer 2

我现在正在使用动画听到，因为你可以看到我提供了正确的0px，因为如果你提供500px的位置：绝对;然后它仍然会在那个位置这只是一个如何动画的例子现在你可以在这个动画功能中提供你想要的左边或任何样式。

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

请参阅上面的动画链接。

或者你也可以使用jquery ui

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

这一切都是你的参考，如何使用不同的模式动画，你可以看到JulienGrégoire为你提供了很好的css解决方案

请参阅此示例：http://jsfiddle.net/kevalbhatt18/syogua8o/3/

的

的
$("box").click(function () { $("box").animate({ right: "0px" },'slow'); });

的

相对＆＃34;位置：绝对＆＃34;之间的动画对象coordinence

2 个答案: