JQuery .toggle方法

Question

我有下面的JavaScript/JQuery代碼，它應該使div SideBar出現在屏幕上，併成爲身體大小的1/5。我在Firefox/Chrome控制檯中沒有遇到任何錯誤，並且不知道爲什麼它不起作用。如果我將第一個切換方法的主體移動到方法本身中，它可以正常工作，所以我假設我使用切換方法錯誤。

var bodyHeight = $(window).height(); 
var bodyWidth = $(window).width(); 
sideWidth = bodyWidth/5; 

function slideSideBar() { 
    $('#SideBar').toggle(
     function() { 
      $("#SideBar").animate({ 
       opacity: 0.6, 
       width: sideWidth 
      }, 600); 
     }, 
     function() { 
      $("#SideBar").animate({ 
       opacity: 0, 
       width: 0 
      }, 600); 
     }); 
} 

的CSS是：

#SideBar { 
    height: 100%; 
    width: 0%; 
    opacity: 0; 
    font-family: Arial, Tahoma, Verdana; 
    color: white; 
    background-color: black; 
} 

Answer 1

在jQuery 1.8的，所述toggle event（的toggle接受了兩個功能的版本）已被廢棄，並且如1.9，將其除去。更多在this question and its answers。

爲了獲得舊的toggle行爲，維護自己的標誌（或者在你的情況下，檢查不透明度）並自己調用toggle method（不是事件）。

這裏的標誌方法，因爲它可能更適合於animate情況（請注意使用的stop，你甚至可能在<想= 1.8）：

var bodyHeight = $(window).height(); 
var bodyWidth = $(window).width(); 
sideWidth = bodyWidth/5; 

function slideSideBar() { 
    var sidebar = $("#SideBar"); 
    var flag = sidebar.css("opacity") != 0; 

    sidebar.click(function() { 
     var options = flag ? {opacity: 0, width: 0} : {opacity: 0.6, width: sideWidth}; 
     flag = !flag; 
     sidebar.stop(true, true).animate(options, 600); 
    }); 
} 

或實際，檢查不透明度stop：

var bodyHeight = $(window).height(); 
var bodyWidth = $(window).width(); 
sideWidth = bodyWidth/5; 

function slideSideBar() { 
    $("#SideBar").click(function() { 
     var sidebar = $(this); 
     sidebar.stop(true, true); 
     sidebar.animate(
      sidebar.css("opacity") != 0 ? {opacity: 0, width: 0} : {opacity: 0.6, width: sideWidth}, 
      600 
     ); 
    }); 
}