带有固定元素的 jQuery .animate() 和 css 位置

Posted 2023-05-08

【中文标题】带有固定元素的 jQuery .animate() 和 css 位置

【英文标题】：jQuery .animate() and css position with fixed element

【发布时间】：2012-10-20 06:44:14

【问题描述】：

我正在努力想办法让它发挥作用，所以寻求帮助。

我有一个固定的侧边导航菜单，它不在屏幕上。我希望让它从屏幕外动画到屏幕上的特定位置。此外，它需要移动的数量会根据屏幕大小而变化（即排水沟大小会改变）。所以，我需要将它移动到相对于容器 div 的特定位置（保持在屏幕中心）。

最好的方法是什么？任何帮助表示赞赏。谢谢！

【参考方案1】：

我不确定我是否完全理解您在寻找什么，但我认为这是您正在寻找的一个小提琴：

http://jsfiddle.net/phoffman/vyaHH/5/

您需要为侧边栏 div 设置动画，确保它位于容器 div 内，并且其 CSS 位置设置为“相对”。

html：

 <div class="container">
     <div id="sidebar"> <p>This is a sidebar</p> </div>
 </div>

CSS：

#sidebar
    position:relative;

jquery：

$('button').click(function()
    $('#sidebar').animate(
        left: 0 //This value of 0 is how far you want the sidebar to animate.
    );
);