如何使用jQuery從右側滑入？

Question

我有一個代碼，當你點擊一個button ，會出現一個div 。 但問題是，我的div從頂部滑入，當有人點擊按鈕時我想要它，它會從右側滑入，帶有過渡。 但我不知道如何更改我當前的代碼以使其工作。 我知道我無法從display: none切換到visibility和opacity來添加CSS動畫，對吧？ 那么我該怎樣做才能讓它盡可能順暢呢？ 有人可以看看並幫幫我嗎？

這是我的代碼：

 $(function() { $("a#toggle").click(function() { $("#slidein").slideToggle(); return false; }); }); 

 #slidein { display: none; } .card { background-color: #bdbdbd; text-transform: uppercase; position: fixed; right: 0; top: 0; height: 100%; } .close { position: absolute; right: 0; background: #fff; opacity: 1; color: #29292b; font-size: 10px; text-decoration-color: #757575; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <div id="slidein"> <div class="card rounded-0 border-0"> <div class="card-header border-0 p-0"> <button type="button" class="close p-2"> <span aria-hidden="true">x close</span> </button> <img src="http://via.placeholder.com/350x200" class="card-img-top rounded-0" src="..." alt="Card image cap" height="200"> </div> <!-- /.card-header --> <div class="card-block py-4 px-3"> <h4 class="card-title mb-2">TEXT</h4> <p class="card-text">TEXT <span>TEXT</span> <span>TEXT</span> </p> <h4 class="card-title mb-2">TEXT</h4> <p class="card-text">TEXT</p> <h4 class="card-title mb-2">TEXT</h4> <p class="card-text">TEXT</p> <div class="form-group"> <textarea class="form-control rounded-0 border-0 py-3" id="exampleTextarea" rows="6" placeholder="TEXT..."></textarea> </div> </div> <!-- /.card-block --> </div> </div> <a href="#" id="toggle">Contact</a> 

Answer 1

您可以使用CSS transition來實現目標。 最初，面板#slidein的幻燈片將位於屏幕右邊緣之外。 CSS類A in當你點擊就會觸發a#toggle 。 點擊button.close將刪除類in從#slidein將面板滑出。

 $(function() { $("a#toggle").click(function() { $("#slidein").toggleClass("in"); return false; }); $("button.close").click(function() { $("#slidein").removeClass("in"); return false; }); }); 

 #slidein { position: fixed; top: 0; width: 100%; /*modify this value to fit your needs*/ right: -100%; /*modify this value to fit your needs*/ /*css transition*/ -webkit-transition: right 500ms ease-out; -moz-transition: right 500ms ease-out; -o-transition: right 500ms ease-out; transition: right 500ms ease-out; } #slidein.in { right: 0; } .card { background-color: #bdbdbd; text-transform: uppercase; height: 100%; } .close { position: absolute; right: 0; background: #fff; opacity: 1; color: #29292b; font-size: 10px; text-decoration-color: #757575; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <div id="slidein"> <div class="card rounded-0 border-0"> <div class="card-header border-0 p-0"> <button type="button" class="close p-2"> <span aria-hidden="true">x close</span> </button> <img src="http://via.placeholder.com/350x200" class="card-img-top rounded-0" src="..." alt="Card image cap" height="200"> </div> <!-- /.card-header --> <div class="card-block py-4 px-3"> <h4 class="card-title mb-2">TEXT</h4> <p class="card-text">TEXT <span>TEXT</span> <span>TEXT</span> </p> <h4 class="card-title mb-2">TEXT</h4> <p class="card-text">TEXT</p> <h4 class="card-title mb-2">TEXT</h4> <p class="card-text">TEXT</p> <div class="form-group"> <textarea class="form-control rounded-0 border-0 py-3" id="exampleTextarea" rows="6" placeholder="TEXT..."></textarea> </div> </div> <!-- /.card-block --> </div> </div> <a href="#" id="toggle">Contact</a>