The first time a div slides down the child elements it contains appear first JQuery

I am making a website with JQuery, and I want a signup bar to slide down when I click a button. For some reason, when I first click it, the signup form appears before the div containing it slides down. The div contains the background color, so it is a very noticeable difference. I am using the following code to make the form slide up first and down last.

            if (signupBarDown) {
                $signup.slideUp();
                $login.slideUp();
            }

            $signupOrLoginDiv.slideToggle(400);

            if (!signupBarDown) {
                $signup.slideDown();
                $login.slideDown();
            }

            signupBarDown = !signupBarDown;

As I said before this works perfectly if its not the first time sliding down/up
I have no idea why this happens.

The forms are absolutely positioned which forced me to right this code to begin with, but I don’t know why that would stop it from working the first time. signupBarDown also starts as false.

I tried changing the positioning to fixed, because positioning it absolutely changed the effects of the script before, but it is still the same.