jquery - marginTop vs marginBottom on a each loop for Jquery

Question

Hi people I already implementing a movile fixed menu to my site based on jquery but i have a little problem with marginTop and marginBottom inside on a each sentence, the marginBottom is not working it seams like something is missing , plz check it out.

On-live example: http://www.utxj.edu.mx/menu_example/index.html

My code...

$(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 help.

Answer 1

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

作为一种解决方案，尝试将元素定位到它们的当前位置并为它们的和属性relative设置动画：topbottom

li {
  position: relative;
}