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

Question

我正在努力想出一种方法来让它发挥作用，所以寻求一些帮助。

我有一个位于屏幕外的固定侧面导航菜单。我希望让它从屏幕外动画到屏幕上的特定位置。此外，它需要移动的量会根据屏幕尺寸而变化(即装订线改变尺寸)。因此，我需要将其移动到相对于容器 div 的特定位置(保持在屏幕中央)。

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

Answer 1

我不确定我完全理解你在寻找什么，但我认为这是你在寻找的 fiddle :

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.
    });
});