javascript - Strange behavior with floated divs and sliding animation -

i'm trying achieve multi-step form each panel slide out , slide in on button click.

i've managed build mechanism i've hit roadblock while testing it.

steps reproduce:

1. click next go panel 2
2. click previous go panel 1

in case, panel 3 somehow comes picture , sits below panel 1. why happening? why doesn't stay hidden?

however, if go way panel 3 , try go panel 1, works fine. breaks if go without visiting panels.

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

ok, found solve of issue. must initialize margin-left panels except first.

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