从内容动画侧边栏然后返回

时间:2014-10-03 12:03:27

标签: javascript jquery css animation jquery-animate

我有一个可切换布局的网站。在默认值上,侧边栏(旁边)通常靠近内容float: right。当我单击切换时,侧边栏应该平滑地显示在浏览器窗口的右侧。我尝试了很多方法,但我无法使其完美运作。

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

如您所见,点击“Animate”按钮后,侧边栏首先向左移动,而不是向右移动。 单击默认设置只会将侧边栏放回而不进行任何动画...

有任何想法,我做错了吗?

1 个答案:

答案 0 :(得分:1)

这是solution

通常,问题是此元素没有初始的“right:”值。 jQuery的动画所做的是将现有(初始)值增加到目标值。

我已将right: 78px添加到“旁边”并删除了top:78px。 此外,您可以为.css()方法

提供纯整数

CSS:

aside {
    float: right;
    right:78px;

JS:

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

<强>已更新

这里是Back animation的更新:

JSFiddle

<强> UPDATE2

以下是改进版本:JSFiddle

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