CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Leuven Wang
Leuven Wang

Reputation: 151

Element moving after Jquery fadeIn()

I have a jquery script which controls some menu bars when activated. Basically, when the user presses the top menu bar, the bottom two would slide down and make space for the content (a html table in this case). After this, the content will use the fadeIn() function to appear on the page. However, at this point. the two bottom menu bars would jump further down the page.

Is there anyway to make them stay at their original positions on the page without change the .animate() function measurements?

Here is the relevant jQuery code:

 menustatus=0;

function menuconfig(){


        if(menustatus===0){

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


            },300)

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


            },300)

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

             menustatus=1
    }

And here is the relevant CSS code:

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

Upvotes: 0

Views: 46

Answers (1)

AwokeKnowing
AwokeKnowing

Reputation: 8206

It's not super clear without a jsfiddle but try setting #table1 to position absolute instead of position relative

Upvotes: 1

Related Questions