还原的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); 
    }); 
}