jquery Animationen zurück zur ursprünglichen css Staaten

Question

Ich habe eine Seite der Elemente, von denen jeder je nach Benutzer-Interaktion Zurückkehren, weg von der gegebenen Funktion animiert werden können:

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

Ich möchte ein erstellen Reset-Funktion, die alle Elemente auf die Seite zurückbringt. Das Ausführen aller Elemente durch die obige Umschaltfunktion funktioniert nicht, da derzeit verborgene Elemente angezeigt werden und aktuell angezeigte Elemente ausgeblendet werden.

Im Wesentlichen auf der Suche nach einer Möglichkeit, alle Elemente in ihren ursprünglichen css-Status zurückzusetzen, unabhängig davon, ob sie von jQuery-Animation verarbeitet wurden.

Thanks-

Edit:

einfach realisiert alles was ich brauche 'Toggle' mit 'Show' ersetzen ist:

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

dies auf ein beliebiges Element Aufruf wird die sicherstellen Element wird in diesem Fall wieder auf "sichtbar" zurückgesetzt. Für einen allgemein anwendbaren Ansatz siehe unten jedoch Nick's answer.

Answer 1

Wenn Sie alle Elemente identifizieren könnten, die in diese Funktion übergeben werden könnte, sagen sie eine Klasse hatte .toggleElem Sie, dass die Werte beim Laden der Seite zu speichern, verwenden könnte und wiederherstellen dann bei Bedarf wie folgt aus:

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

Dann könnte man sie an jedem Punkt später wiederherstellen:

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