我有一个可切换布局的网站。在默认值上,侧边栏(旁边)通常靠近内容float: right
。当我单击切换时,侧边栏应该平滑地显示在浏览器窗口的右侧。我尝试了很多方法,但我无法使其完美运作。
以下是当前状态的小提琴:http://jsfiddle.net/kqzug20p/
如您所见,点击“Animate”按钮后,侧边栏首先向左移动,而不是向右移动。 单击默认设置只会将侧边栏放回而不进行任何动画...
有任何想法,我做错了吗?
答案 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的更新:
<强> UPDATE2 强>
以下是改进版本:JSFiddle
它具有更复杂的逻辑,可以用于不同的“主”尺寸。它可能不适合你100%,但给出了关于方向的想法