slide在jQuery中切換和淡入淡出

Question

我想讓我的菜單爲平板電腦和桌面視圖使用淡入淡出（768px向上），但我希望我的導航在移動設備（767px及以下）上使用slideToggle。

$(document).ready(function() { 

    if($(window).width() >= 767){ 
    $('#toggleMenu').click(function(){ 
     $('ul.menu-nav').fadeToggle("1400"); 
    });  
    }   
}); 

但我無法進一步採取行動。

Answer 1

我會做這種方式，這將需要jQuery用戶界面：

$(document).ready(function() { 
    $('#toggleMenu').click(function(){ 
     var toggleEffect = $(window).width() >= 767 ? "fade" : "slide"; 
     $('ul.menu-nav').toggle(toggleEffect, 1400); 
    });   
}); 

Answer 2

HTML

<a href="#" id="toggleMenu">Toggle Menu</a> 
<ul class="menu-nav"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 

jQuery的

$(document).ready(function() { 

    //Create a function for the two states. 
    var toggleMenu = function() { 
     if($(window).width() >= 767) { 
      $('#toggleMenu').unbind('click').click(function(){ 
       $('ul.menu-nav').fadeToggle("1400"); 
      });  
     } 
     else 
     { 
      //Smaller than 767 
      $('#toggleMenu').unbind('click').click(function(){ 
       $('ul.menu-nav').slideToggle("1400"); 
      }); 
     } 
    }; 

    //Update if the window is resized and run the toggleMenu function. 
    $(window).resize(function() { 
     toggleMenu(); 
    }); 
    toggleMenu(); 

}); 

工作實例：http://jsfiddle.net/psvtr9ad/1/

工作原理：

1. 首先，創建一個名爲toggleMenu包含有條件的邏輯功能。
2. 該函數還將取消綁定之前的點擊事件，以便當再次調用時，它將有效地「重置」效果（在幻燈片或淡入淡出切換之間）。
3. 然後綁定窗口大小調整事件，以便如果瀏覽器窗口調整大小，則會再次運行該函數並使用正確的效果函數。
4. 最後，調用該函數，使其在頁面加載時執行。