jQuery 淡入/淡出功能无法正常工作

Question

jQuery 淡入/淡出功能无法正常工作

我需要创建一个注册页面；它有两个不同的div。第一个 div 有用于登录和注册的部分。我没有对电子邮件和密码进行验证，所以每当我点击登录按钮或注册按钮时；名为 first_part 的 div 应该淡出，survey_part 应该淡入。但他的功能有时会起作用；其他时间页面只闪烁。

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

由于之前调用的 fadeOut 事件，表单将被提交。 你应该控制提交。

Answer 2

尝试像这样添加e.preventDefault() -

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