javascript - jQuery 代码第二次不显示表单

Question

我有一个表单，当我单击注册按钮时，表单会动画化，并且关闭按钮变得可见，然后我单击关闭按钮，表单将隐藏，注册按钮再次可见，但问题是当我再次单击注册按钮时，表单不再出现，但关闭按钮出现。

如果有人建议的话，用于此目的的短格式 jQuery 代码也是值得赞赏的。

我在下面添加了我的代码 fiddle

 <script>
 $(document).ready(function () {
      $('#close').hide();

      $('#regbtn').click(function () {
           $('#close').show();
           $('#regbtn').hide(1000);

           $('#firstCont').animate({
                position:'absolute',
                right: '40px',
                top: '20%',
                opacity: '1',
                height: '800px',
                width: '800px',
                margin: '0 50px 0 100px'
           });
      });
      $('#close').click(function(){
           $('#firstCont').hide(1000);
           $('#close').hide(1000);
           $('#regbtn').show(1000);
      });
 });


</script>

$(document).ready(function () {
      $('#close').hide();

      $('#regbtn').click(function () {
           $('#close').show();
           $('#regbtn').hide(1000);

           $('#firstCont').animate({
                position:'absolute',
                right: '40px',
                top: '20%',
                opacity: '1',
                height: '800px',
                width: '800px',
                margin: '0 50px 0 100px'
           });
      });
      $('#close').click(function(){
           $('#firstCont').hide(1000);
           $('#close').hide(1000);
           $('#regbtn').show(1000);
      });
 });

.col-centered {
	border:3px solid blue;
}
#primary {
	padding:15px;
}
#firstCont {
	height:0px;
	width:0px;
	overflow:hidden;
	opacity:0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="container" >
	<div class="row">
		<div class="text-center"> 
			<button class="btn btn-success btn" id="regbtn">Click For Regestration</button>
		</div>
	</div>
	<div class="row">
		<div class="text-center"> 
			<button class="btn btn-danger" id="close">Close</button>
		</div>
	</div>
</div>
<div class="container" >
	<div class="row">
		<div class="text-center" > 

		</div>
	</div>
</div>

<div class="container-fluid" id="firstCont">
	<div class="row centered-form center-block">

		<div class="col-xs-6 col-centered">
			<form id="primary">
				<div class="form-group">
					<label for="name">Name:</label>
					<input type="text" class="form-control" required id="email" placeholder="Enter Name">
				</div>
				<div class="form-group">
					<label for="email">Email:</label>
					<input type="email" class="form-control" required id="pwd" placeholder="Enter Email">
				</div>

				<div class="form-group" required>
					<label for="gender">Gender:</label>
					<select class="form-control" id="gender">
						<option>--Select Gender--</option>
						<option>Male</option>
						<option>Female</option>
					</select>
				</div>

				<div class="form-group">
					<label for="phone">Phone:</label>
					<input type="text" class="form-control" required id="phone" placeholder="Enter Phone">
				</div>
				<div class="form-group">
					<label for="add">Address:</label>
					<input type="text" class="form-control" required id="address" placeholder="Enter Address">
				</div>
				<div class="form-group">
					<label for="country">Country:</label>
					<select class="form-control" id="country">
						<option>--Select Country--</option>
						<option>Bangladesh</option>
						<option>Chaina</option>
						<option>Germany</option>
						<option>India</option>
					</select>
				</div>

				<div class="form-group" required>
					<label for="city">City:</label>
					<select class="form-control" id="city">
						<option>--Select City--</option>
					</select>
				</div>

				<div class="text-right"> 
					<button class="btn-info btn" id="submit">SUBMIT</button>
				</div>
			</form>
		</div>
	</div>
</div>

ProblemFiddle

Answer 1

试试这个

$('#regbtn').click(function() {
    $('#close').show();
    $('#regbtn').hide(1000);
    $('#firstCont').show(1000);
    $('#firstCont').animate({
        position: 'absolute',
        right: '20px',
        top: '20%',
        opacity: '1',
        height: '700px',
        width: '700px',
        margin: '0 50px 0 100px'
    });
});

working demo