防止雙擊動畫，但再次允許

Question

我有一個固定的菜單我隱藏，當我點擊＃菜單觸發器，它從頁面的側面拉菜單。如果我點擊＃菜單觸發或＃菜單覆蓋，然後我再次隱藏菜單。當我單擊或雙擊＃菜單觸發器時，它將隱藏菜單並運行一次動畫，但是當我雙擊＃菜單 - 疊加層時，它會將它的所有內容滑動過多兩次。

我試過使用.one點擊功能，但是當我重新打開菜單時，我無法使用疊加層將其關閉。

jQuery('#menu-trigger').click(function() { 
    if ($(this).css('margin-right') == '250px') { 
     $('#menu').animate({ 
      "margin-right": '-=250' 
     }); 
     $('#menu-trigger').animate({ 
      'margin-right': '-=250' 
     }); 
     $("#skinSelectorContainer").hide(); 
    } else { 
     $('#menu').animate({ 
      'margin-right': '+=250' 
     }); 
     $('#menu-trigger').animate({ 
      'margin-right': '+=250' 
     }); 
    } 
    $('#menu-overlay').fadeToggle(); 
}); 


jQuery('#menu-overlay').click(function() { 
    $('#menu').animate({ 
     "margin-right": '-=250' 
    }); 
    $('#menu-trigger').animate({ 
     'margin-right': '-=250' 
    }); 
    $('#menu-overlay').fadeToggle(); 
}); 

Answer 1

您可以使用：

.stop()當前正在運行的動畫開始一個新的

之前，或者你可以測試是否該元素是在動畫的進步與

:animated selector

jQuery('#menu-trigger').on('click', function(e) { 
 
    // 
 
    // if menu is animated do nothing and return 
 
    // 
 
    if ($('#menu').is(':animated')) { 
 
     console.log('animation prevented'); 
 
     return; 
 
    } 
 
    if ($('#menu').offset().left != 0) { 
 
     $('#menu').animate({ 
 
      "left": 0 
 
     }, 'slow'); 
 
    } else { 
 
     $('#menu').animate({ 
 
      "left": ($('body').width()-$('#menu').width()) 
 
     }, 'slow'); 
 
    } 
 
});

#menu { 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
    right: 0; 
 
    background: yellow; 
 
}

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

 

 
<button type="button" id="menu-trigger">menu trigger</button> 
 
<div id="menu"> 
 

 
</div>