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设置为绝对位置而不是位置相对

在Jquery fadeIn（）之后移动的元素

1 个答案: