jQueryのトグルとアニメーションを右クリックして、右クリックして左側にあるdivを外側のdivにする方法はありますか？

Question

メニューは正常に動作しますが、アニメーションはありません。クリック時の.fullpagenavが左から右に出て、再度クリックすると右から左に戻ります。あなたがトグルとアニメーションでそれを行うことができるならば、短いコードのためだけには素晴らしいことでした。

私は、次のトピックで、このコードを見つけました：だからSlide to side with jquery on click and toggle

、私はこの次のコードを持っている：上記

\t $(".secondary-toggle").click(function() { 
 
    $('.fullpagenav').animate({width:'toggle'},350); 
 
\t });

.fullpagenav { 
 
\t position:fixed; 
 
\t height: 100%; 
 
\t width:100%; 
 
\t z-index: 2; 
 
\t background-color:#464646; 
 
\t display:none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fullpagenav"> 
 
\t <div id="secondary" class="secondary toggled-on" aria-expanded="true"> 
 
     <nav id="site-navigation" class="main-navigation" role="navigation"> 
 
     ... 
 
\t  </nav> 
 
\t </div> 
 
    </div>

Answer 1

コードが動作していない、私は似たコードを作成しますどのようにそれを行うことができますあなたを示すために、あなたのために。その単純なコード、あなたが何かを理解していなければ、私に尋ねてください。

<script 
    src="https://code.jquery.com/jquery-3.1.1.min.js" 
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
    crossorigin="anonymous"></script> 
<script> 
    $(document).on('click', '.menu-item', function(e) { 
    var self = $(e.currentTarget); 
    self.toggleClass('menu-item-toggle') 
    }); 
</script> 
<style> 
    .menu-item { 
    width: 50px; 
    height: 50px; 
    background-color: green; 
    position: relative; 
    left: 0; 
    transition: left 2s; 
    } 
    .menu-item-toggle { 
    left: 100px; 
    } 
</style> 

<div class="menu-item">Menu item</div> 

https://jsfiddle.net/s7076ja4/

Answer 2

ページの左端のでそれを設定し、位置を持つクラスを作成する必要があります。まず左：0 [OK]をクリックします上やエフェクトがトランジションを使用するために、そのクラスを切り替えます。

\t $(".secondary-toggle").click(function() { 
 
     if($(this).hasClass('active_nav')){ 
 
      $('.fullpagenav').removeClass('active_nav'); 
 
     } 
 
     else{ 
 
      $('.fullpagenav').addClass('active_nav'); 
 
     } 
 
     
 
\t });

.fullpagenav { 
 
\t position:fixed; 
 
\t height: 100%; 
 
\t width:100%; 
 
\t z-index: 2; 
 
\t background-color:#464646; 
 
\t left:-100%; 
 
    transition: all 1s linear 1s; 
 
    -webkit-transition: all 1s linear 1s; 
 
    -moz-transition: all 1s linear 1s; 
 
    
 
    } 
 
    .active_nav{ 
 
     left:0!important; 
 
     transition: all 1s linear 1s; 
 
     -webkit-transition: all 1s linear 1s; 
 
     -moz-transition: all 1s linear 1s; 
 
    
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fullpagenav"> 
 
\t <div id="secondary" class="secondary toggled-on" aria-expanded="true"> 
 
     <nav id="site-navigation" class="main-navigation" role="navigation"> 
 
     ... 
 
\t  </nav> 
 
\t </div> 
 
    </div>

Answer 3

私はあなたが要求したように、そのdiv要素に最もおよびクリックで左にfullpagenavのdivをアニメーション化配置。以下は

ここでjQueryのアニメーションについて読ん更新されたコード

\t $(".fullpagenav").click(function() { 
 
     $('.secondary').animate({width:'toggle'},350); 
 
});

.fullpagenav { 
 
     position: fixed; 
 
     height: 100%; 
 
     width: 1%; 
 
     margin-left: -1%; 
 
    } 
 
    
 
    .secondary { 
 
     position: fixed; 
 
     height: 100%; 
 
     width: 10%; 
 
     background-color: #464646; 
 
     display: none; 
 
     padding-left: 1%; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fullpagenav"> 
 
\t <div id="secondary" class="secondary toggled-on" aria-expanded="true"> 
 
     <nav id="site-navigation" class="main-navigation" role="navigation"> 
 
     ... 
 
\t  </nav> 
 
\t </div> 
 
    </div>