jQuery的動畫 - 不透明度比高度

Question

想知道是否有可能使一個jQuery動畫性能比其他慢慢 - 這就是我現在所擁有的：

$(".thebox").animate({ 
     height: "toggle", 
     opacity: "toggle" 
    },250); 

當.thebox衰的同時滑下，我喜歡讓動畫的不透明度變得更慢，同時使高度部分更快。

整個事情必須使用click導致動畫的按鈕。它必須是一個切換開關。

感謝任何能夠回答這個問題的人！

Answer 1

將動畫堆疊在彼此之上，並禁用默認動畫隊列。

$(".thebox") 
.animate({height: "toggle"}, {duration: 250, queue:false}) 
.animate({opacity: "toggle"}, {duration: 500, queue:false}); // Runs twice as slow. 

編輯：

由於事件正在使用撥動兩次觸發，我們需要一種不同的方法，來檢測wheter隱藏或顯示框。一個簡單的解決方案將是一個輔助類這樣：

var theBox = $('.thebox'); 
if (theBox.hasClass('active')) { 
    // It is active, then fade it out 
    thebox 
    .removeClass('active') 
    .animate({height: 0}, {duration: 250, queue:false}) 
    .animate({opacity: 0}, {duration: 500, queue:false}); 

} else { 
    // It is not active, show it 
    thebox 
    .addClass('active') 
    .animate({height: 'auto'}, {duration: 250, queue:false}) 
    .animate({opacity: 1}, {duration: 500, queue:false}); 
} 

值得指出的：該動畫可以使用效果基本show，了slideDown，淡入淡出和動畫，而不是來完成（）。還要注意，上面假設只有一個類theBox的元素。