切換不執行

Question

我有一個點擊功能，正在執行，因爲fadeToggles的工作。但是我試圖進行動畫製作的div＃疊加源並不是動畫。我將它設置爲0px的高度，然後將其設置爲480px。動畫本身起作用，我已經在切換功能之外對其進行了測試。但不知何故，切換功能不會被執行。

$("#button-up").click(function(){ 
    $("#overlay-sources").toggle(
     function() 
     { 
      $(this).animate({height: "480px"}, 500); 
     }, 
     function() 
     { 
      $(this).animate({height: "0px"}, 500); 
     }); 

    $("#overlay-sources").fadeToggle('fast'); 
    $("#blackout").fadeToggle('fast'); 
}); 

Answer 1

這就是我所需要的。

$("#button-up").toggle(
    function() 
    { 
     $("#overlay-sources").animate({top: "141px"}, 500); 
     $("#blackout").fadeToggle('fast'); 
    }, 
    function() 
    { 
     $("#overlay-sources").animate({top: "690px"}, 500); 
     $("#blackout").fadeToggle('fast'); 
    } 
); 

Answer 2

如果你不反對jQueryUI的，或者已經包含它，整個頂部：

$("#overlay-sources").toggle(
     function() 
     { 
      $(this).animate({height: "480px"}, 500); 
     }, 
     function() 
     { 
      $(this).animate({height: "0px"}, 500); 
     }); 

變爲：

$("#overlay-sources").slideToggle(500);

但是不要CSS高度爲0，簡單地display:none，並且該函數將處理高度動畫。

編輯

對不起，我錯了。它看起來像slideToggle是jQuery核心庫的一部分，並不需要jQuery UI