如何使外部的div來自左側點擊和ri-點擊右側的jQuery切換和動畫？

菜單正常，但沒有動畫。我想.fullpagenav點擊從左到右出來，當重新點擊返回（從右到左）。如果您可以使用切換和動畫進行操作，只能使用短代碼，那就太棒了。如何使外部的div來自左側點擊和ri-點擊右側的jQuery切換和動畫？

我發現了以下主題驗證碼：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>

來源

2017-03-07 Sasha Chirico

瞭解jQuery的動畫在這裏：http://api.jquery.com/animate/ –

我沒有英語那麼好..我很難理解這個頁面的含義。我只能看到這些例子，但其他所有的文檔我真的不明白。 –

以上代碼不工作，我創建similiar代碼爲了你，向你展示如何做到這一點。它的簡單代碼，如果你不明白什麼，就問我。

<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/

來源

2017-03-07 12:23:40 Paul

這個看起來像我想要的，但是，如果我有一個單獨的按鈕點擊？因爲我的菜單需要隱藏（或僅在頁面之外），並且當我點擊我的按鈕時，div需要按照上面所做的操作（所以，向左滑動，然後在ri-click上，向右移動） –

Here I給代碼解釋https://jsfiddle.net/kesLwo7o/ 寬度，你應該適合你的需要的代碼。如果我幫忙，請設置「最佳答案」選項;] – Paul

是的，你解決了我的問題！愛你哈哈。你只能激動地解釋我什麼是「切換」？我認爲這是替代的東西，對吧？而且，爲什麼「.click」方法與「.on（'click'...）」不一樣？所以我給你投下最好的答案！ –

首先，你需要在最左邊的頁面設置，然後創建一個具有類左側位置：0，然後切換上點擊該類別和影響使用的過渡。

\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>

來源

2017-03-07 12:47:14

這項工作很好開始，但是當我點擊關閉，它不會關閉:( –

我把fullpagenav格到最左和上點擊該div動畫按照您的要求。

下面是更新的代碼

\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>

來源

2017-03-07 13:02:55 NikhilGoud

如何使外部的div來自左側點擊和ri-點擊右側的jQuery切換和動畫？

回答

相關問題