サイドウェイトグル - 右にスライドして開き、左にスライドします。

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：このオプションは、コンテンツのみにアニメーションを適用することができます。