Jquery的each循环上的marginTop与marginBottom

Question

大家好，我已经在我的网站上实现了一个基于jquery的移动固定菜单，但我在每个句子中的marginTop和marginBottom有一点问题，marginBottom不工作它看起来像是缺少了什么，请检查一下。

现场示例：http://www.utxj.edu.mx/menu_example/index.html

我的代码...

$(document).ready(function(){
    $(function() {
            var d=300;

            $('#navigation a').each(function(){
                $(this).stop().animate({
                    'marginTop':'-80px'
                },d+=150);
            });

            $('#navigation > li').hover(function () {
                $('a',$(this)).stop().animate({
                    'marginTop':'-2px'
                },200);
            }, function () {
                $('a',$(this)).stop().animate({
                    'marginTop':'-80px'
                },200);
            }
        );
    });
});

$(document).ready(function(){
    $(function() {
            var d=300;

            $('#navigation2 a').each(function(){
                $(this).stop().animate({
                    'marginBottom':'-80px'
                },d+=150);
            });

            $('#navigation2 > li').hover(function () {
                $('a',$(this)).stop().animate({
                    'marginBottom':'-2px'
                },200);
            }, function () {
                $('a',$(this)).stop().animate({
                    'marginBottom':'-80px'
                },200);
            }
        );
    });
});

Tnx 4救命

Answer 1

利润率正在做他们应该做的事情。元素将增长以适应动画块的新大小，其余元素将随其一起拖动。

作为一种解决方案，可以尝试将元素relative定位到其当前位置，并设置其top和bottom属性的动画：

li {
  position: relative;
}