marginTop vs marginBottom在Jquery的每个循环中

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