元素在 Jquery fadeIn() 之后移动

Question

我有一个 jquery 脚本，它在激活时控制一些菜单栏。基本上，当用户按下顶部菜单栏时，底部两个会向下滑动并为内容腾出空间（在本例中为 html 表格）。在此之后，内容将使用fadeIn() 函数出现在页面上。然而，此时。底部的两个菜单栏会跳到页面的下方。

有没有办法让它们留在页面上的原始位置而不更改 .animate() 函数测量值？

这里是相关的 jQuery 代码：

 menustatus=0;

function menuconfig(){


        if(menustatus===0){

        $('.menuhead2').animate({
            top:"500px"


            },300)

        $('.menuhead3').animate({
            top:"555px"


            },300)

            $('#table1').delay(300).fadeIn(300);

             menustatus=1
    }

这里是相关的 CSS 代码：

    .menuhead2{     /*This is the one of the bottom menu bars */
                                position:relative;
                                top:80px;
                                cursor:pointer;
                                    height:30px;
                                    z-index:10;
                                }
                                .menuhead3{ /*This is the one of the bottom menu bars */
                                position:relative;
                                top:135px;
                                cursor:pointer;
                                    height:30px;
                                    z-index:10;
                                }


                                .menuhead1{ /*This is the top menu bar */
                                    cursor:pointer;
                                    height:30px;
                                    position:relative;
                                    top:30px;
                                    }





                                #table1{ /*This is the content that fades in using the fadeIn() jQuery function. */
                                    position:relative;
                                    top:50px;
                                    left:30px;
                                    display:none;
                                    z-index:9;
                                    }

Answer 1

没有 jsfiddle 不是很清楚，但尝试将 #table1 设置为绝对位置而不是相对位置