.hide（）隐藏得太多了

时间：2015-04-14 00:29:26

标签： javascript jquery html css

我想隐藏div＆＃34; loginArea＆＃34;然后淡出div＆＃34; newAccArea＆＃34;。每当我尝试激活它时，它会显示div＆＃34; newAccArea＆＃34;只是片刻，然后隐藏它。我知道这听起来像一个明显的解决方案，我有一个额外的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);
    });
});

2 个答案:

答案 0 :(得分：0)

您没有看到newAccArea的原因是因为它相对位于底部500像素，最终将所有内容放在屏幕上方，位于视口顶部之上。您在loginArea淡出时能够看到它的原因是因为只要loginArea仍然可见，newAccArea的起点较低（因为loginArea的高度为300px，因此低300个像素），所以从该起点底部开始的500像素足够低，仍能看到它。

当你没有显示loginArea时，你只需要将位置设置为它需要的位置，你应该看得很清楚。

答案 1 :(得分：0)

您说I want to hide the div "loginArea" and then fade in the div "newAccArea".在这种情况下，您可以使用callback函数在隐藏完成后显示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的一侧。

相关问题
最新问题