在点击时将fadeIn应用于隐藏的div并显示其内容

Question

我正在尝试在显示和隐藏div时应用淡入淡出。

当我点击按钮时，表格fadeOut（已完成）并且隐藏div需要出现在完全相同的位置。

我想从桌面div上滑过，但这也没有发生！

$(selector).toggle('slide', {direction: 'left'}, 1400);

以下是我的代码

$(document).ready(function(){
$("[data-toggle='toggle']").click(function() {
    var selector = $(this).data("target");
    //$(selector).toggleClass('in');
	$('#info').fadeOut('slow');
	$(selector).fadeIn('slow');
});
});

#demo {
    : width 2s ease;
    -moz-transition: width 2s ease;
    -o-transition: width 2s ease;
    transition: width 2s ease;

    overflow: hidden;
    vertical-align: middle;
    line-height: 30px;
}
#demo.in {
    width: 50%;
	height: 50%;
}
#other {
    : width 2s ease;
    -moz-transition: width 2s ease;
    -o-transition: width 2s ease;
    transition: width 2s ease;
    
    display: inline-block;
    overflow: hidden;
    background: yellow;
    vertical-align: middle;
    line-height: 30px;
}
#other.in {
    width: 50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
		
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- begin snippet: js hide: false -->

<div class="container-fluid">
<div class="page-head"> Form Submit</div>
<div class="row">
<div class="col-xs-12">
	<div class="col-xs-6" id="other"> 
		<form class="form-horizontal" method="get">
		 <fieldset class="form-group">
			<label for="exampleInputEmail1">Email address</label>
			<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
			<small class="text-muted">We'll never share your email with anyone else.</small>
		  </fieldset>
		  <fieldset class="form-group">
			<label for="exampleInputPassword1">Password</label>
			<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
		  </fieldset>
		  <fieldset class="form-group">
			<label for="exampleSelect1">Example select</label>
			<select class="form-control" id="exampleSelect1">
			  <option>1</option>
			  <option>2</option>
			  <option>3</option>
			  <option>4</option>
			  <option>5</option>
			</select>
		  </fieldset>
		</form>
		<button type="button" class="btn btn-primary btn-sm"  data-toggle="toggle" data-target="#demo"> Read agreement</button>
	</div>
	<div class="col-xs-6" id="info" > 
	<table class="table table-bordered">
	<tr>
		<td> Name: </td>
		<td> Test </td>
	</tr>
	<tr>
		<td> Name: </td>
		<td> Test </td>
	</tr>
	<tr>
		<td> Name: </td>
		<td> Test </td>
	</tr>
	</table>
	</div>
</div>
	<div class="hide" id="demo"> 
	<p>
		"Lorem ipsum" text is derived from sections 1.10.32–3 of Cicero's De finibus bonorum et malorum (On the Ends of Goods and Evils, or alternatively [About] The Purposes of Good and Evil).[2] The original passage began: Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur adipisci velit (translation: "Neither is there anyone who loves, pursues or desires pain itself because it is pain").

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