Sideway切換 - 向右滑動打開並向左滑動以關閉

Question

我正在嘗試側向切換 - 當用戶單擊它時，它會平滑地滑向右側，當用戶想要關閉它時，它會滑入左側

我創建了我的JSFiddle，但我不確定如何在用戶單擊時將幻燈片集成到幻燈片中。 這裏的生活：https://jsfiddle.net/gmf1sypw/

HTML：

<div class="wrapper"> 
    <h3>Happening</h3> 
     <div class="content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aliquam deserunt harum rem earum assumenda perspiciatis expedita. Aliquid distinctio tenetur fugiat qui recusandae obcaecati voluptates.</p> 
     </div> 
</div> 

CSS：

*, *:before, *:after { 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
    } 

    body { 
     font-family: 'Open Sans', sans-serif; 
     margin-top: 50px; 
    } 


    .wrapper { 
     width: 100%; 
     min-height: 250px; 
     position: relative; 
     border: 2px solid orange; 
     border-left: 40px solid orange; 
     padding: 15px; 
     color: rgba(0, 0, 0, 0.5); 
     font-size: small; 
     display: inline-block; 
    } 
    .wrapper h3 { 
     font-size: 1rem; 
     color: white; 
     text-transform: uppercase; 
     letter-spacing: 3px; 
     position: absolute; 
     bottom: 0; 
     left: 0; 
     margin-left: -30px; 
     -webkit-transform: rotate(270deg); 
     -moz-transform: rotate(270deg); 
     -ms-transform: rotate(270deg); 
     -o-transform: rotate(270deg); 
     transform: rotate(270deg); 
     -webkit-transform-origin: 0 0; 
     -moz-transform-origin: 0 0; 
     -ms-transform-origin: 0 0; 
     -o-transform-origin: 0 0; 
     transform-origin: 0 0; 
    } 

Answer 1

你可以嘗試jQuery UI slide effect，確定你的方向。或者你可以使用一些jQuery來的要素移位：

$('.wrapper').on('click', function() { 
 
    var pntLeft = $('.wrapper').parent().offset().left, 
 
     chdLeft = $('.wrapper').position().left, 
 
     toggleLeft = (Math.floor(chdLeft - pntLeft)) == -450 ? "0px" : "-450px"; 
 
    $('.wrapper').animate({ left: toggleLeft }, 400); 
 
});

body { 
 
    font-family: 'Open Sans', sans-serif; 
 
    margin-top: 50px; 
 
} 
 

 

 
.wrapper { 
 
    width: 400px; 
 
    min-height: 150px; 
 
    position: relative; 
 
    border: 2px solid orange; 
 
    border-left: 40px solid orange; 
 
    padding: 15px; 
 
    color: rgba(0, 0, 0, 0.5); 
 
    font-size: small; 
 
    display: inline-block; 
 
    left: 0px; 
 
} 
 
.wrapper h3 { 
 
    font-size: 1rem; 
 
    color: white; 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin-left: -30px; 
 
    -webkit-transform: rotate(270deg); 
 
    -moz-transform: rotate(270deg); 
 
    -ms-transform: rotate(270deg); 
 
    -o-transform: rotate(270deg); 
 
    transform: rotate(270deg); 
 
    -webkit-transform-origin: 0 0; 
 
    -moz-transform-origin: 0 0; 
 
    -ms-transform-origin: 0 0; 
 
    -o-transform-origin: 0 0; 
 
    transform-origin: 0 0; 
 
}

<div class="wrapper"> 
 
    <h3>Happening</h3> 
 
    <div class="content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aliquam deserunt harum rem earum assumenda perspiciatis expedita. Aliquid distinctio tenetur fugiat qui recusandae obcaecati voluptates.</p> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

編輯：此選項可讓您應用動畫只有內容：Fiddle。