jQuery fadeIn/fadeOut functions not working properly

Question

jQuery fadeIn/fadeOut functions not working properly

I need to create a registration page; which has two different divs. First div has part for log-in & registration. I didn't implement a validation for email & password so whenever I hit Log-In button or Register button; div called first_part should be fade out and survey_part should fade in. But his functionality works sometimes; other times page blinks only.

HTML

<div id="first_part">
                    <div id="login_part">
                        <form>
                            <label>Kullanıcı Adı <input type="text" name="username"></label><br>
                            <label id="password_section">Şifre <input type="password" name="password"></label><br>
                            <input type="submit" value="Log In" id="login_submit">
                        </form>
                    </div>
                    <div id="register_part">
                        <span>Üyelik</span><br>
                        <form>
                        <label>Mail <input type="text"></label>
                        <input type="submit" value="Register" id="register_submit">
                        </form>
                    </div>
                </div>

                <div id="survey_part">
                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam at dui sed bibendum. Phasellus ultricies quam nec odio bibendum dapibus. Suspendisse varius eget metus et ultricies. Etiam fringilla, est ultrices viverra ullamcorper, tellus elit vulputate ante, ut vulputate quam metus eleifend nisi. Etiam interdum feugiat rhoncus. Nulla tincidunt, augue sed euismod ullamcorper, nisl mi luctus arcu, vel posuere nunc ipsum vel orci. Phasellus consequat augue sodales, laoreet massa in, congue massa. Ut aliquet ac lectus sed vulputate. Nunc luctus massa vel     blandit eleifend. Curabitur dictum luctus blandit.</span>
                    <form>
                        <input type="radio" name="question" value="Answer1">Answer1<br>
                        <input type="radio" name="question" value="Answer2">Answer2<br>
                        <input type="radio" name="question" value="Answer3">Answer3<br>
                        <input type="radio" name="question" value="Answer4">Answer4<br>
                        <input type="submit" value="Next">
                    </form>
                </div>

JS

$("#register_submit").on("click",function(){
        $("#first_part").fadeOut(1000,function(){
            $("#survey_part").fadeIn(1000);
        });
    });

Answer 1

As fadeOut event called before, form will be submit. you should controll submit.

Answer 2

Try adding a e.preventDefault() like this -

$('#register_submit').closest('form').on('submit',function(e){
    e.preventDefault(); 
});