javascript - 如何让我的内容 2 最初隐藏，然后从右侧滑入？

Question

document.getElementById("button1").addEventListener("click", mouseOver1);

function mouseOver1(){

   document.getElementById("button1").style.color = "red";

}


document.getElementById("button2").addEventListener("click", mouseOver); 


    function mouseOver(){ 

      document.getElementById("button2").style.color = "purple";
   }



$("#button1").hover(function() {
    $(this).css('cursor','pointer');
}); 

$("#button2").hover(function() {
    $(this).css('cursor','pointer');
}); 
 

 $('#button1').on('click', function () {
   var error = 0; 
   var usernameError = document.getElementById("username_error1");
   var passwordError = document.getElementById("password_error2");

   if ($(".existingUsername").get(0).value != "S0104675") {
   usernameError.innerHTML = "Please enter an existing valid username";
    error = 1; 
    } else {
    usernameError.innerHTML = '';
   } 
   if ($(".existingPassword").get(0).value != "honor433") {
    passwordError.innerHTML = "Please enter an existing valid password";
     error = 1;

   } else {
    passwordError.innerHTML = '';
  }
  if(error == 0)
  {  
     $("#para1").animate({ left: "-100%" });
     $(".username-label").animate({ left: "-105%" });
     $(".existingUsername").animate({ left: "-105%" });
     $(".password-label").animate({ left: "-105%" });
     $(".existingPassword").animate({ left: "-105%" });
     $("#button1").animate({ left: "-105%" });
  }

});

$('#button2').on('click', function () {

var newUsernameError = $("#New_Username_error").html('');
var newPasswordError = $("#New_Password_error").html('');
var newEmailAddressError = $("#New_Email_error").html('');
var newRepeatEmailAddressError = $("#Repeat_Email_error").html('');

var newUsername = $('.newUsername').val();
var newPassword = $('.newPassword').val();
var newEmail = $('.newEmail').val();
var repeatEmail = $('.repeatEmail').val();

var errorsFound = 0; 

if (newUsername === "") {
  errorsFound = 1;
  newUsernameError.html("The username must not be empty.");
} else if (newUsername.length < 6) {
  errorsFound = 1;
  newUsernameError.html("The username must be at least 6 characters.");
}

if (newPassword.length < 6) {
  errorsFound = 1;
  newPasswordError.html("The password must be at least 6 characters.");
}

if (newEmail === "") {
  errorsFound = 1;
  newEmailAddressError.html("The email must not be left empty.");
} else if (!/@/.test(newEmail)) {
  errorsFound = 1;
  newEmailAddressError.html("The email must contain an @ symbol.");
}

if (repeatEmail !== newEmail) {
  errorsFound = 1;
  newRepeatEmailAddressError.html("This repeat email doesn't equal first.");
}

if(errorsFound == 0) { 
  
     $("#para2").animate({ left: "-100%" });
     $(".Username-label1").animate({ left: "-105%" });
     $(".newUsername").animate({ left: "-105%" });
     $(".Password-label2").animate({ left: "-105%" });
     $(".newPassword").animate({ left: "-105%" });
     $(".Email-label3").animate({ left: "-105%" });
     $(".newEmail").animate({ left: "-105%" });
     $(".Repeat-Email-label4").animate({ left: "-105%" });
     $(".repeatEmail").animate({ left: "-105%" });
     $("#button2").animate({ left: "-105%" });
}
 
});

.intro h1 {
  font-family: 'Cambria';
  font-size: 16pt;
  font: bold;
  text-align: left;
}

.intro p {
  font-family: 'Calibri';
  font: italic;
  font-size: 12pt;
  padding: 0px 690px 0px 20px;
  text-align: left;
}

.content {
  border: 2px solid;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

#para1 {
  padding: 0px 1050px 0px 20px;
  position: relative; 
}

#para2 {
  padding: 0px 1099px 0px 20px;
  position: relative; 
}

.username-label,
.password-label {
 margin: 10px 0px 0px 350px;
 position: relative; 
 top: -70px; 
}

.existingUsername, 
.existingPassword, 
#username_error1, 
#password_error2
{
    top: -70px; 
     position: relative;       
}

#button1{ 
     background-color: #add8e6;
     margin-left: 425px; 
     position: relative; 
     top: -70px; 
    -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius:10px;
  padding: 0px 20px 0px 20px; 
}

#button2{
  background-color: #add8e6;
  margin-left: -500px; 
  position: relative; 
  top: -10px; 
 -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 0px 20px 0px 20px; 

}


.Username-label1, 
.Password-label2,           
.Email-label3, 
.Repeat-Email-label4 
{
  margin: 0px 0px 0px 330px;
  position: relative; 
  top: -70px; 
}
.newUsername, 
.newPassword, 
.newEmail, 
.repeatEmail{
  position: relative;
   top: -70px;
  margin-left: 40px; 

} 

span{

 color: red; 
 margin-left: 300px;
 position: relative; 
 top: -70px; 
}

#LeftElementNames, 
#RightElementValues{ 

  display: hidden; 
  border: 1px; 
 /* I want element names all on one side (left) inside of the border and element value (right) and a vertical line separating them */ 

}

<html>

<head>

  <link href="Home.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <title>Project</title>

</head>

<body>


<div class="container">
  <div class="intro">

    <h1>Welcome to Cuyahoga Community College Student Services Online</h1>

    <p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
  </div>
  <br/>

  <div class="content">
    <div class="row top">
      <p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
      <div class="login">
        <label class="username-label" for="existingUsername">Username</label> 
         <input class="existingUsername" type="text" /><br><span id="username_error1"></span><br>


        <label class="password-label" for="existingPassword">Password</label>
        <input class="existingPassword" type="password"/><br><span id="password_error2"></span><br>
        <button id="button1">Log in</button>
      </div>
    </div>
    <hr/>
    <div class="row bottom">
      <p id="para2">New users, please create a new account by providing us with some basic information.</p>

      <div class= "new_customers_info">

        <label class="Username-label1" for="newUsername">Username</label>
        <input class="newUsername" type="text"/>
        <br><span id="New_Username_error"></span><br>

        <label class="Password-label2" for="newPassword">Password</label>
        <input class="newPassword" type="password"/>
        <br><span id="New_Password_error"></span><br>

        <label class="Email-label3" for="newEmail">Email Address</label>
         <input class="newEmail" type="email"/>
         <br><span id="New_Email_error"></span><br>

        <label class="Repeat-Email-label4" for="repeatEmail">Repeat Email Address</label>
         <input class="repeatEmail" type="email"/>
         <span id="Repeat_Email_error"></span>

        <button id="button2">Create Account</button>
      </div>
    </div>
   

  </div>
    <div class="content2">

   <div id="LeftElementNames">
   <label class="ElementOne"  for="accountName">AccountName</label><br>
   <label class="ElementTwo"  for="accountEmail">EmailAddress</label><br> 
   <label class="ElementThird" for="accountGpa">CurrentGPA</label><br>
   </div>

   <div id="RightElementValues">
    <input class="accountName"  type= "text"/>
    <input class="accountEmail" type= "email"/>
    <input class="accountName" type= "number"/>
   </div>
  </div>
   <br/>
  <footer>Cuyahoga Community College</footer>
  <footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
</div>
    <script src="Home.js"></script>
</body>
</html>

大家好，

我无法理解为什么 content2 信息在我刷新页面时没有被隐藏，以及当它从右侧(在我的半径边界内的上部内容中)动画(滑动)时如何让它不隐藏content)在现有用户输入正确的信息帐户后，我遇到的另一个问题是如何使用 JSON 将现有用户帐户信息填充到适当的文本框中。这甚至可以做到吗？任何例子将不胜感激。到目前为止，这是我当前的代码。

Answer 1

1. why content2 information is not hidden when I refresh my page

因为你没有隐藏它。只需将其添加到您的 CSS 中:

.content2{
   display:none;
}

2. how can I get it to be unhidden when it's animated(slide) in from the right

如果不手动操作 CSS，则无法单独使用 Jquery 进行向右滑动。从简单的隐藏/显示开始。

$(".content2").show();

3. how to use JSON to populate an existing user accounts information into the appropriate texboxes

给定:

<input type='text' class='name-box'>
<input type='text' class='age-box'>

在 js 中你有:

var data = {
    name : "John Doe",
    age : 21
};

然后简单地:

$(".name-box").val(data.name);
$(".age-box").val(data.age);