单击时在隐藏 div 上应用淡入并显示其内容

Question

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

当我单击按钮时，table 淡出（完成）和隐藏 div 需要出现在完全相同的位置。

我想从右边滑过 table 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

如果您的按钮应在 table 和协议文本之间切换，则使用 fadeToggle

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

您的 div 没有显示，因为它有 width = 0 添加 class col-xs-12（或您想要的任何宽度）和 collapse最初隐藏它：

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

单击时在隐藏 div 上应用淡入并显示其内容

Apply fadeIn over hidden div on click and show it's content

javascript

jquery

fadein