在單擊時將FadeIn應用於隱藏的div並顯示其內容

Question

我正在嘗試在顯示和隱藏div時應用淡入和淡出。

當我單擊按鈕時，表格fadeOut（完成）和hide 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

如果您的按鈕應在表格文本和協議文本之間切換，請使用fadeToggle

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

您的div沒有顯示，因為它的width = 0添加類col-xs-12 （或您想要的寬度）並collapse以最初隱藏它：

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