Javascript .hide（）隐藏的内容太多_Javascript_Jquery_Html_Css

Javascript .hide（）隐藏的内容太多

javascript jquery html css

Javascript .hide（）隐藏的内容太多,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想隐藏div“loginArea”，然后淡入div“newAccArea”。每当我尝试激活它时，它只会显示div“newAccArea”片刻，然后也会隐藏它。我知道这听起来像是一个显而易见的解决方案，我有一个额外的div或忘记了一个结束div标记，但我找不到任何。请帮帮我，谢谢。摘要代码HTML： <div class="backarea"> <div class="loginArea">

我想隐藏div“loginArea”，然后淡入div“newAccArea”。每当我尝试激活它时，它只会显示div“newAccArea”片刻，然后也会隐藏它。我知道这听起来像是一个显而易见的解决方案，我有一个额外的div或忘记了一个结束div标记，但我找不到任何。请帮帮我，谢谢。摘要代码HTML：

<div class="backarea">
    <div class="loginArea">
        <!--Random Stuff-->
    </div>
    <div class="newAccArea">
        <!--More Random Stuff-->
    </div>
</div>
JQuery:

$(document).ready(function(){
    $('.createone').click(function(){ //".createone" is nothing you have to //worry about
        $('.loginArea').hide('slow');
        $('.newAccArea').fadeTo('fast',1);
    });
});


                         **FULL CODE JUST INCASE**
HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Log in box</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Ramabhadra' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Khand:700' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
</head>
<body>
<div class="successLog">
<div class="header">
    <ul class="cats">
        <li class="listItems" id="home">Home</li>
        <li class="listItems" id="dashboard">Dashboard</li>
        <li class="listItems" id="contactUs">Contact Us</li>
    </ul>
  </div>
  <div class='dropdownHome'>
    <ul class="catLists">
        <li class="catListItem">Event Calender</li><br>
        <li class="catListItem">Bookings</li><br>
        <li class="catListItem">Picture Gallery</li><br>
        <li class="catListItem">Login</li><br>
        <li class="catListItem">Sign Up</li>
    </ul>
  </div>
  <div class="dropdownDashboard">
    <ul class="catLists">
        <li class="catListItem">Saved Info</li><br>
        <li class="catListItem">Friends</li><br>
        <li class="catListItem">Document</li><br>
        <li class="catListItem">Profile</li><br>
        <li class="catListItem">Account</li>
    </ul>
  </div>
  <div class="dropdownContactUs">
    <ul class="catLists">
        <li class="catListItem">Email</li><br>
        <li class="catListItem">Forum</li><br>
        <li class="catListItem">Phone-numbers</li><br>
        <li class="catListItem">Facebook</li><br>
        <li class="catListItem">Twitter</li>
    </ul>
  </div><Br><Br><Br>
    <h1 class="welcomeBack">Hello! Welcome back to Code Acedamy</h1>
    <!--<button class="logOut">Log Out</button>-->
</div>
<div class="backarea">
    <div class="loginArea">
        <input type="text" placeholder="Username" class="userInput" name="userInput"><h2 class="username">Username:</h2></input>
        <input type="password" class="passInput" placeholder="Password" name="passInput"<h2 class="password">Password:</h2></input>
        <button class="login">Log In</button>
        <p class="createacc">Don't have an account? <span class="createone">Create one.</span></p>
        <p class="error">Sorry but that username or password is incorrect.</p>
    </div>
    <div class="newAccArea">
        <h1 class="newAccText">Create New Account</h1>
        <h2 class="newUsername" id="position">Username:</h2>
        <input class="newUser" type="text" name="newUser" placeholder="Username" id="position"></input>
        <h2 class="newPassword" id="position">Password:</h2>
        <input class="newPass" type="password" name="newPass" placeholder="Password" id="position"></input>
        <h2 class="newPassword" id="position">Password:</h2>
        <h2 class="confNewPassword" id="position">Confirm Password:</h2>
        <input class="confNewPass" type="password" name="confNewPass" placeholder="Confirm Password" id="position"></input>
        <button class="createAccButt">Create Account</button>
    </div>
</div>
</body>
</html>
CSS:

body {
    background-color:#F0F0F0;
}
.successLog {
    background-color:#8A8A8A;
    height:450px;
    width:700px;
    z-index:1;
    opacity:0;
}
/*CREATE NEW ACCOUNT AREA*/
.newAccArea {
    position:relative;
    bottom:500px;
    opacity:0;
    z-index:-5;
}
.newUsername {
    position:relative;
    top:80px;
    text-align:center;
    color:black;
    font-family: 'Oswald', sans-serif;
}
.newUser {
    position:relative;
    top:60px;
    left:45px;
    padding:5px;
    font-family: 'Lato', sans-serif;
}
.newPassword {
    position:relative;
    top:42px;
    text-align:center;
    color:black;
    font-family: 'Oswald', sans-serif;
}
.newPass {
    position:relative;
    top:23px;
    left:45px;
    padding:5px;
    font-family: 'Lato', sans-serif;
}
.confNewPassword {
    position:relative;
    bottom:50px;
    text-align:center;
    color:black;
    font-family: 'Oswald', sans-serif;
}
.confNewPass {
    position:relative;
    bottom:70px;
    left:45px;
    padding:5px;
    font-family: 'Lato', sans-serif;
}
.createAccButt {
    color:white;
    background-color:#E60716;
    padding:5px;
    font-family: 'Oswald', sans-serif;
    border:none;
    margin:10px;
    position:relative;
    bottom:77;
    left:78;
    height:40;
    width:80;
    font-size:20px;
    border-radius:4px;
}
.createAccButt:hover {
    background-color:#A81919;
}
.newAccText {
    position:relative;
    top:100px;
    font-family: 'Oswald', sans-serif;
    font-size:30px;
    text-align:center;
    color:red;
}
/*LOG IN AREA*/
.backarea {
    background-color:#6DE3E3;
    width:255px;
    height:300px;
    border:1px solid black;
    border-radius:9px;
    position:relative;
    top:67px;
    left:230px;
    position:fixed;
}
.loginArea {
    background-color:#6DE3E3;
    width:255px;
    height:300px;
    border:1px solid black;
    border-radius:9px;
}
.userInput {
    padding:5px;
    margin:7px;
    font-family: 'Lato', sans-serif;
    position:relative;
    top:50px;
    left:35px;
    border:1px solid white;
}
.userInput:hover {
    border:2px solid #60BF68;
}
.username {
    color:#E60716;
    font-family: 'Oswald', sans-serif;
    position:relative;
    bottom:50px;
    left:75px;
}
.passInput {
    padding:5px;
    margin:7px;
    font-family: 'Lato', sans-serif;
    position:relative;
    top:20px;
    left:35px;
    border:1px solid white;
}
.passInput:hover {
    border:2px solid #60BF68;
}
.password {
    color:#E60716;
    font-family: 'Oswald', sans-serif;
    position:relative;
    bottom:80px;
    left:75px;
}
.login {
    color:white;
    background-color:#E60716;
    padding:5px;
    font-family: 'Oswald', sans-serif;
    border:none;
    margin:10px;
    position:relative;
    bottom:60;
    left:71;
    height:40;
    width:80;
    font-size:20px;
    border-radius:4px;
}
.login:hover {
    background-color:#B81414;
    border:1px solid black;
}
.createacc {
    position:relative;
    bottom:73px;
    font-family: 'Roboto Condensed', sans-serif;
    padding:8
}
.createone {
    text-decoration:none;
    color:#4548E6;
    font-size:13px;
}
.createone:hover {
    color:purple;
}
.error {
    color:red;
    font-family: 'Merriweather', serif;
    font-size:10;
    position:relative;
    bottom:93px;
    text-align:center;
    opacity:0
}
/*DROP DOWN MENU
/*DEFUALT CLASSES*/
.clicked {
    color:#fff;
}
.invis {
    opacity:0;
}
/*HTML CLASSES*/
.header {
    background-color:black;
    height:50px;
    border-radius:10px;
    z-index:10;
}
li {
    color:white;
    display:inline;
    width:100%
}
.cats {
    padding:6px;
    width:100%;
    font-size:27px;
    font-family: 'Khand', sans-serif;
}
.cats .listItems:hover {
    width:100px;
    font-size:27px;
    font-family: 'Khand', sans-serif;
    color:#96F29C;
    display:inline;
    position:relative;
    padding-left:70px;
}
.cats .listItems:active {
    width:100px;
    font-size:27px;
    font-family: 'Khand', sans-serif;
    color:#318A29;
    display:inline;
    position:relative;
    padding-left:70px;
}
.listItems {
    padding:70px;
}
.dropdownHome {
    height:200px;
    width:180px;
    background-color:#9E9E9E;
    position:absolute;
    left:14px;
    bottom:210px;
    border:2px solid black;
    z-index:1;
    border-radius:13px;
    opacity:0;
}
.dropdownDashboard {
    height:200px;
    width:180px;
    background-color:#9E9E9E;
    position:absolute;
    left:255px;
    bottom:210px;
    border:2px solid black;
    z-index:1;
    border-radius:13px;
    opacity:0;
}
.dropdownContactUs {
    height:200px;
    width:180px;
    background-color:#9E9E9E;
    position:absolute;
    left:507px;
    bottom:210px;
    border:2px solid black;
    z-index:1;
    border-radius:13px;
    opacity:0;
}
.catLists {
    font-size:18px;
    text-align:center;
    position:relative;
    right:20;
    font-family: 'Ramabhadra', sans-serif;
}
.catListItem {
    color:black;
}
.welcomeBack {
    font-family: 'Oswald', sans-serif;
    color:blue;
    text-align:center;
}
.logOut {
    position:relative;
    top:130px;
    left:312px;
    padding:5px;
    border:none;
    background-color:red;
    color:white;
    width:100px;
    height:40px;
    font-size:20px;
    font-family: 'Oswald', sans-serif;
}
.logOut:hover {
    background-color:#B51919;
    border-top:1px solid #F7A3A3;
    border-left:1px solid #F7A3A3;
}
JavaScript:

$(document).ready(function(){
    $('.createone').click(function(){
        $('.loginArea').hide('slow');
        $('.newAccArea').fadeTo('fast',1);
    });
});
$(document).ready(function(){
    $('.login').click(function(){
        var userResult = $('input[name=userInput]').val();
        var passResult = $('input[name=passInput]').val();
        if(userResult === "CodeAcademy" && passResult === "fun-coding" || userResult === "User_Example" && passResult === "Pass_Example") {
           $('.backarea').fadeOut('fast');
           $('.successLog').fadeTo('fast',1);
        }
        else {
        $('.passInput').css('border-color','red');
        $('.userInput').css('border-color','red');
        $('.error').fadeTo('fast',1);
        $('.error').effect( "bounce",{ times: 3 },"slow" );
        };
    });
});
$(document).ready(function(){
    $('#home').click(function(){
        $('.dropdownHome').slideToggle('slow');
        $('.dropdownHome').fadeTo('fast',1);
    });
});
$(document).ready(function(){
    $('#dashboard').click(function(){
        $('.dropdownDashboard').slideToggle('slow');
        $('.dropdownDashboard').fadeTo('fast',1);
    });
});
$(document).ready(function(){
    $('#contactUs').click(function(){
        $('.dropdownContactUs').slideToggle('slow');
        $('.dropdownContactUs').fadeTo('fast',1);
    });
});


JQuery：
$（文档）.ready（函数（）{
$（'.createone'）。单击（function（）{//“.createone”没有什么好担心的
$（'.loginArea'）.hide（'slow'）；
$（'newAccArea'）.fadeTo（'fast'，1）；
});
});
**完整的代码以防万一**
HTML:
登录框

主页
仪表板
联系我们


事件日历
预订
图片库
登录
注册


保存的信息
朋友们
文件
配置文件
账户


电子邮件
论坛

电话号码
Facebook


推特





你好欢迎回到Acedamy代码
用户名：
你看不到newAccArea的原因是因为你把它相对地定位在距离底部500像素的位置，这最终会把所有的内容都放在屏幕外的视口顶部上方。当loginArea淡出时，您能够看到它的原因是，只要loginArea仍然可见，newAccArea的起点就更低（因为loginArea的高度是300px，所以更低300像素），因此该起点底部的500像素足够低，可以看到它
当loginArea未显示时，您只需将位置设置为需要的位置，您应该可以看到它。
您说过我想隐藏div“loginArea”，然后淡入div“newAccArea”。
在这种情况下，隐藏完成后，您可以使用回调
函数显示newAccArea
div：
$(document).ready(function() {
    $('.createone').click(function() {
        $('.loginArea').hide('slow', function() {
            // It'll fade in after hiding the .loginArea
            $('.newAccArea').fadeTo('fast', 1);
        });
    });
});

关于您提到的问题，根据您的代码，它不应该发生。newAccArea
div不应隐藏，因为它位于loginArea
div的外侧。
您是否检查了浏览器控制台是否有任何错误？jQueryOnClick函数本身工作正常，因此问题一定在别处。