动画侧边栏外部的内容，然后返回

Question

我有一个可切换布局的网站。在默认情况下，侧边栏（放在一边）通常就在float: right的内容附近。当我点击切换时，侧边栏应该平滑地显示在浏览器窗口的右侧。我试过很多方法，但我不能使它完美地工作。

以下是当前状态：http://jsfiddle.net/kqzug20p/

如您所见，单击"动画"按钮后，侧边栏会先向左移动，然后再向右移动。单击默认值只会将侧边栏放回原处，而不会有任何动画。。。

你知道我哪里做错了吗？

Answer 1

这是解决方案

一般来说，问题是这个元素没有初始的"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%适用于您，但提供了关于方向的想法