還原的jQuery動畫回到原來的CSS狀態

Question

我有元素的頁面，每一個，取決於用戶交互，可以通過給定函數進行動畫遠：

function slideAndFade(id){ 
    $(id).animate({opacity: 'toggle', width: 'toggle'}, 500); 
} 

我想創建一個重置功能，將所有元素重新放到頁面上。通過上面的切換功能運行所有元素將不起作用，因爲當前隱藏的元素將被顯示，並且當前顯示的元素將被隱藏。

基本上尋找方法來恢復所有元素到他們原來的CSS狀態，無論他們是否已經採取了jQuery動畫。

Thanks-

編輯：

剛剛意識到我需要做的就是 '秀' 取代 '切換'：

function revertSlideAndFade(id){ 
    $(id).animate({opacity: 'show', width: 'show'}, 500); 
} 

任何元素上調用，這將確保在這種情況下，元素會恢復爲可見。但是，請參閱下面的Nick's answer以獲得更一般適用的方法。

Answer 1

如果你能找出有可能傳遞到這個函數的所有元素，說他們有一類.toggleElem，你可以用它來存儲值在頁面加載並在需要時再恢復，是這樣的：

$(function() { 
    $(".toggleElem").each(function() { 
    var $this = $(this); 
    $.data(this, 'css', { opacity: $this.css('opacity'), 
          width: $this.css('width') }); 
    }); 
}); 

然後你可以在以後的任何時候恢復它們：

function restore() { 
    $(".toggleElem").each(function() { 
    var orig = $.data(this, 'css'); 
    $(this).animate({opacity: orig.opacity, width: orig.width}, 500); 
    }); 
}