浮动div和滑动动画的奇怪行为

Question

我正在尝试实现一个多步骤表单，其中每个面板将滑出并在按钮单击时滑入。

我设法建立了这种机制，但在测试时我遇到了障碍。

重现步骤：

1. 点击下一步转到面板2
2. 点击上一页返回面板1

在这种情况下， Panel 3 以某种方式进入图片并位于Panel 1下面。为什么会发生这种情况？为什么它不隐藏？

但是，如果一直到 Panel 3 ，然后尝试返回 Panel 1 ，一切正常。只有在没有访问所有面板的情况下回去，它才会中断。

＆＃13;
＆＃13;
var global = {};
global.main_width = $('#nl-multi-form').outerWidth();
global.nof = $('#fieldset fieldset').length;
global.fieldset_width = global.main_width;
$('#fieldset').css('width', global.nof * global.fieldset_width);
$('#fieldset fieldset').css('width', global.fieldset_width);

$('.nl-next').on('click', function(e){
	e.preventDefault();
	var $clicked_button = $(this);
	var $fieldset = $clicked_button.closest('fieldset');
	var $nextFieldset = $fieldset.next();
	var fieldset_width = $fieldset.outerWidth();
	$fieldset.animate({
		marginLeft:-fieldset_width+'px'
	}, 300);
	$nextFieldset.animate({				
		marginLeft:0+'px'
	}, 300);
	
});

$('.nl-previous').on('click', function(e){
	e.preventDefault();
	var $clicked_button = $(this);
	var $fieldset = $clicked_button.closest('fieldset');
	var $prevFieldset = $fieldset.prev();	
	var fieldset_width = $fieldset.outerWidth();
	$fieldset.animate({
		marginLeft:fieldset_width+'px'
	}, 300);
	$prevFieldset.animate({
		marginLeft:0+'px'
	}, 300);
	
});
＆＃13;
#nl-multi-form{
	margin-top:10px;
	position:relative;	
	overflow:hidden;
}
.clear{
	clear:both;
}
#nl-multi-form fieldset{
	border:1px solid #ccc;
	min-height:100px;
	float:left;	
}
.nl-panel{	
	padding:10px;
}
.nl-navigation{	
	text-align:right;	
	padding-bottom:10px;	
}
.nl-navigation button{
	margin-left:10px;
}
＆＃13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="container">
	<div class="row">
		<div class="col-md-6 col-md-offset-3">
			<div id="nl-multi-form">
				<div id="fieldset">
					<fieldset>
						<div class="nl-panel">
							<h1>This is panel 1</h1>
							<div class="nl-navigation">
								<button class="btn btn-primary nl-next">Next</button>
							</div>
						</div>
					</fieldset>
					<fieldset>
						<div class="nl-panel">
							<h1>This is panel 2</h1>
							<div class="nl-navigation">
								<button class="btn btn-primary nl-previous">Previous</button><button class="btn btn-primary nl-next">Next</button>
							</div>
						</div>
					</fieldset>
					<fieldset>
						<div class="nl-panel">
							<h1>This is panel 3</h1>
							<div class="nl-navigation">
								<button class="btn btn-primary nl-previous">Previous</button><button class="btn btn-primary">Submit</button>
							</div>
						</div>
					</fieldset>					
					<div class="clear"></div>
				</div>
			</div>
		</div>
	</div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

好的，我找到了解决问题的方法。您必须为除第一个以外的所有面板初始化margin-left。

$('#fieldset fieldset:not(:first-child)').css('margin-left', global.fieldset_width);

＆＃13;

＆＃13;

var global = {};
global.main_width = $('#nl-multi-form').outerWidth();
global.nof = $('#fieldset fieldset').length;
global.fieldset_width = global.main_width;
$('#fieldset').css('width', global.nof * global.fieldset_width);
$('#fieldset fieldset:not(:first-child)').css('margin-left', global.fieldset_width);
$('#fieldset fieldset').css('width', global.fieldset_width);

$('.nl-next').on('click', function(e){
	e.preventDefault();
	var $clicked_button = $(this);
	var $fieldset = $clicked_button.closest('fieldset');
	var $nextFieldset = $fieldset.next();
	var fieldset_width = $fieldset.outerWidth();
	$fieldset.animate({
		marginLeft:-fieldset_width+'px'
	}, 300);
	$nextFieldset.animate({				
		marginLeft:0+'px'
	}, 300);
	
});

$('.nl-previous').on('click', function(e){
	e.preventDefault();
	var $clicked_button = $(this);
	var $fieldset = $clicked_button.closest('fieldset');
	var $prevFieldset = $fieldset.prev();	
	var fieldset_width = $fieldset.outerWidth();
	$fieldset.animate({
		marginLeft:fieldset_width+'px'
	}, 300);
	$prevFieldset.animate({
		marginLeft:0+'px'
	}, 300);
	
});

＆＃13;

#nl-multi-form{
	margin-top:10px;
	position:relative;	
	overflow:hidden;
}
.clear{
	clear:both;
}
#nl-multi-form fieldset{
	border:1px solid #ccc;
	min-height:100px;
	float:left;	
}
.nl-panel{	
	padding:10px;
}
.nl-navigation{	
	text-align:right;	
	padding-bottom:10px;	
}
.nl-navigation button{
	margin-left:10px;
}

＆＃13;

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

<div class="container">
	<div class="row">
		<div class="col-md-6 col-md-offset-3">
			<div id="nl-multi-form">
				<div id="fieldset">
					<fieldset>
						<div class="nl-panel">
							<h1>This is panel 1</h1>
							<div class="nl-navigation">
								<button class="btn btn-primary nl-next">Next</button>
							</div>
						</div>
					</fieldset>
					<fieldset>
						<div class="nl-panel">
							<h1>This is panel 2</h1>
							<div class="nl-navigation">
								<button class="btn btn-primary nl-previous">Previous</button><button class="btn btn-primary nl-next">Next</button>
							</div>
						</div>
					</fieldset>
					<fieldset>
						<div class="nl-panel">
							<h1>This is panel 3</h1>
							<div class="nl-navigation">
								<button class="btn btn-primary nl-previous">Previous</button><button class="btn btn-primary">Submit</button>
							</div>
						</div>
					</fieldset>					
					<div class="clear"></div>
				</div>
			</div>
		</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;