javascript - 从内容外部动画侧边栏然后返回

Question

我有一个布局可切换的网站。在默认情况下，侧边栏(aside)通常位于带有 float: right 的内容附近。当我点击切换时，侧边栏应该平滑地移动到浏览器窗口的右侧。我尝试了很多方法，但我不能让它完美地工作。

这是当前状态的 fiddle :http://jsfiddle.net/kqzug20p/

如您所见，单击“动画”按钮后，侧边栏先向左移动，然后向右移动。单击默认设置只是将侧边栏放回去，没有任何动画...

知道我哪里做错了吗？

Answer 1

这里是 solution

一般来说，问题是这个元素没有初始的“right:”值。jQuery 动画的作用是将现有(初始)值增加到目标值。

我已经将 right: 78px 添加到“aside”并删除了 top:78px。此外，您可以为 .css() 方法提供纯整数

CSS:

aside {
    float: right;
    right:78px;

JS:

$("aside").addClass("animate").animate({
        right: 0
    });

已更新

这里是返回动画的更新:

JSFiddle

更新 2

这是改进版:JSFiddle

它有更复杂的逻辑，为不同的“主要”尺寸做好准备。它可能不会 100% 适合你，但会给出方向的想法