我有一个布局可切换的网站。在默认情况下,侧边栏(aside)通常位于带有 float: right
的内容附近。当我点击切换时,侧边栏应该平滑地移动到浏览器窗口的右侧。我尝试了很多方法,但我不能让它完美地工作。
这是当前状态的 fiddle :http://jsfiddle.net/kqzug20p/
如您所见,单击“动画”按钮后,侧边栏先向左移动,然后向右移动。 单击默认设置只是将侧边栏放回去,没有任何动画...
知道我哪里做错了吗?
最佳答案
这里是 solution
一般来说,问题是这个元素没有初始的“right:”值。 jQuery 动画的作用是将现有(初始)值增加到目标值。
我已经将 right: 78px
添加到“aside”并删除了 top:78px
。
此外,您可以为 .css()
方法提供纯整数
CSS:
aside {
float: right;
right:78px;
JS:
$("aside").addClass("animate").animate({
right: 0
});
已更新
这里是返回动画的更新:
更新 2
这是改进版:JSFiddle
它有更复杂的逻辑,为不同的“主要”尺寸做好准备。它可能不会 100% 适合你,但会给出方向的想法
关于javascript - 从内容外部动画侧边栏然后返回,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26178596/