javascript - float div 和滑动动画的奇怪行为

Question

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

我已经设法构建了该机制，但在测试时遇到了障碍。

重现步骤:

1. 单击下一步转到面板 2
2. 点击Previous返回Panel 1

在这种情况下，面板 3 以某种方式出现并位于面板 1 下方。为什么会这样？为什么它不保持隐藏状态？

但是，如果一直转到面板 3，然后尝试返回到面板 1，一切正常。如果我没有访问所有面板就返回，它只会中断。

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

#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;
}

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

Answer 1

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

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

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

#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;
}

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