jQuery: Entfernen einer CSS-Eigenschaft animieren

Question

Ich bin visuell "kollabieren" einige DOM-Elemente mit jQuery (durch Schrumpfung ihrer Breite auf 0px und Ausblenden von ihnen) wie folgt:

$(".slideoutmenu").animate({ width: 0, opacity: 0 }, function() { $(this).hide(); }); 

Die Breite dieser Elemente kann variieren, aber das Dokument wird durch CSS korrekt gestaltet, ohne dass eine bestimmte Breite festgelegt wird.

Normalerweise könnte ich, um diese Elemente wieder einzublenden, einfach etwas wie folgt tun:

$(".slideoutmenu").stop().show().css({ width: '', opacity: 1 });

Ich möchte diese Elemente jedoch in umgekehrter Richtung animieren (ein- und ausblenden).

Normalerweise würde ich dies mit etwas Ähnlichem wie diesem tun:

$(this).children(".slideoutmenu").stop().show().animate({ width: 250, opacity: 1 });

Dies ist also der offensichtliche Versuch:

$(this).children(".slideoutmenu").stop().show().animate({ width: "", opacity: 1 });

Aber das funktioniert nicht.

Das Problem ist letztlich die feste Zahl "250" in dem obigen Beispiel. Das funktioniert nicht, weil die Breiten variabel sind. Ich muss das Ergebnis der Verwendung der leeren Zeichenfolge in der css setter und "animieren" zu kombinieren ... aber ich kann nicht herausfinden, wie dies zu tun. Ich habe versucht, die "250" mit 'undefined', 'null', '-1', '' zu ersetzen, und ich habe Google durchsucht... ohne Erfolg.

Ich verstehe, ich kann wahrscheinlich einige Messung Tricks mit dem Element vor dem Benutzer versteckt - aber ich kann mir nicht vorstellen, dies ist nicht ein ziemlich häufiges Problem - so dass ich hoffe, es ist ein "Standard" Weg, dies zu tun, oder dass es in irgendeiner Weise gebaut und ich weiß nur nicht über sie.

Vielen Dank für die Lektüre.

FOLLOW UP:

Auf der Grundlage von Michaels freundlicher Antwort habe ich ein kleines Quick-and-Dirty-Plugin entwickelt, mit dem ich diese Aufgabe inline erledigen kann. (vielleicht kann jemand auf die Plugin-Idee zu erweitern und es besser machen)

Hier ist das Plugin:

(function( $ ){

  $.fn.cacheCss = function( prop ) {  

    return this.each(function() {

      var $this = $(this);

        if (prop instanceof Array)
        {
            for (var pname in prop)
            {
                if ($this.data('cssCache-' + prop[pname]) != undefined)
                    continue;

                $this.data('cssCache-' + prop[pname], $this.css(prop[pname]));
            }
        }
        else
        {
            if ($this.data('cssCache-' + prop) != undefined)
                return $this;

            $this.data('cssCache-' + prop, $this.css(prop));
        }

        return $this;

    });

  };

  $.fn.revertCss = function(settings, prop, animated) {  

    if (settings == null)
        settings = {};

    return this.each(function() {

      var $this = $(this);

        if (prop instanceof Array)
        {
            for (var pname in prop)
            {
                if ($this.data('cssCache-' + prop[pname]) != undefined)
                    settings[prop[pname]] = $this.data('cssCache-' + prop[pname]).replace(/px$/, "");               
            }
        }
        else
        {
            if ($this.data('cssCache-' + prop) != undefined)
                settings[prop] = $this.data('cssCache-' + prop).replace(/px$/, "");
        }

        if (!animated)
          return $this.css(settings);

        return $this.animate(settings);

    });

  };

})( jQuery );

Und hier ist, wie ich meinen Code ändern konnte, um ihn zu verwenden:

Die ursprüngliche Zeile, in der die css-Eigenschaft festgelegt wurde:

$(".slideoutmenu").animate({ width: 0, opacity: 0 }, function() { $(this).hide(); }); 

wurde ersetzt durch:

$(".slideoutmenu").cacheCss('width').animate({ width: 0, opacity: 0 }, function() { $(this).hide(); }); 

Jetzt speichert ".cacheCss('width')" den Wert der CSS-Eigenschaft, bevor ich meine Animation ausführe.

Und die Zeile, in der ich diese Änderungen "rückgängig" machen musste:

$(this).children(".slideoutmenu").stop().show().animate({ width: 250, opacity: 1 });

wurde durch diese ersetzt:

$(this).children(".slideoutmenu").stop().show().revertCss({ opacity: 1 }, 'width', true);

Jetzt wird ".revertCss(...)" die zwischengespeicherten Einstellungen verwenden, um meine Breiteneigenschaft umzukehren (animiert!)

Ich habe den Stecker so gemacht, dass er auch Arrays akzeptiert, so dass man das auch machen kann:

.cacheCss(['width', 'height'])

und dann:

.revertCss(null, ['width', 'height'], true)

der dritte Parameter steuert, ob die Umkehrung animiert ist oder nicht.

Wenn Sie andere Eigenschaften haben, die Sie gleichzeitig animieren möchten (wie ich es mit "Opazität" im Beispiel zuvor getan habe), können Sie diese als ersten Parameter übergeben, so wie Sie ein Objekt an die Funktion .animate() übergeben würden.

Ich bin mir sicher, dass der Stecker GROSSartig verbessert werden könnte, aber ich dachte, es wäre nett, ihn trotzdem zu veröffentlichen.

Auch ein weiterer Punkt - ich hatte zu ersetzen spurious "px" am Ende der CSS-Werte ... wieder, ich bin sicher, es ist wahrscheinlich ein besserer Weg, das zu tun, aber ich habe gerade eine Standard-Regex verwendet.