Question

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

如果有人建议的话，用于此目的的短格式jQuery代码也很明显。

我在下面添加了我的代码

 <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>

＆＃13;

$(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);
      });
 });

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 2

您正在隐藏#firstcount而不再显示它。试试这个修改：

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

Answer 3

我修改了你的小提琴here。而不是hide()我使用animate({...})来设置表单的基本样式。

基本上，当您隐藏表单时，应将其样式设置为与基本样式相同。或者，如果您想使用hide()，则必须使用show()代替animate({...})。

Answer 4

您正在hide()上致电#firstCont。因此，当您想再次显示时，需要拨打show()。

Answer 5

解决问题的正确方法是设置首先需要动画的css元素的值，因为隐藏集显示值为none，需要将其放回“block”，就像你的情况一样。

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

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

           $('#firstCont').css("display","block");
           $('#firstCont').css("height","0");
           $('#firstCont').css("width","0");

           $('#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>

您可以在此处进行测试：https://jsfiddle.net/acosonic/4k3ntfmg/1/

jQuery代码第二次没有显示表单

5 个答案: