javascript - 单击时将 fadeIn 应用于隐藏的 div 并显示其内容

Question

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

当我单击按钮时，表格淡出(完成)并且隐藏 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>

Answer 1

如果您的按钮应在表格和协议(protocol)文本之间切换，请使用 fadeToggle

$('#info').fadeToggle('slow');
$(selector).fadeToggle('slow');

你的div没有显示，因为它有width = 0添加类col-xs-12(或任何你想要的宽度)和折叠以最初隐藏它:

<div class="collapse col-xs-12" id="demo"> 
    <p>
        "Lorem ipsum".....
    </p>
    </div>