从内容之外的动画侧边栏然后返回答案

【问题标题】：Animate sidebar outside from the content then back从内容之外的动画侧边栏然后返回
【发布时间】：2014-10-03 22:55:24
【问题描述】：

我有一个可切换布局的网站。在默认情况下，侧边栏（旁边）通常就在带有float: right 的内容附近。当我单击切换时，侧边栏应该动画到浏览器窗口的右侧，流畅。我尝试了很多方法，但我不能让它完美地工作。

这是当前状态的小提琴：http://jsfiddle.net/kqzug20p/

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

知道我哪里做错了吗？

【问题讨论】：

【解决方案1】：

这里是solution

一般来说，问题在于这个元素没有初始的“right:”值。 jQuery 的动画所做的就是将现有（初始）值增加到目标值。

我已将right: 78px 添加到“旁边”并删除了top:78px。另外，你可以给.css()方法提供纯整数

CSS：

aside {
    float: right;
    right:78px;

JS：

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

更新

这里是 Back 动画的更新：

更新2

这里是改进版：JSFiddle

它具有更复杂的逻辑，可用于不同的“主要”尺寸。它可能不适合你 100%，但可以提供有关方向的想法

【讨论】：