Elternelement mit jQuery animieren

Question

Ich arbeite derzeit an einem Anmeldebildschirm, auf dem ich jQuery und jQuery UI verwende, um die Eingaben bei .focus() und .blur() mit dem Effekt .animate() zu animieren.

Die Struktur des Formulars ist:

Ich verwende äußere Elemente um die Eingaben mit einem 'zusätzlichen dicken Rand' zu versehen, hier ist ein Screenshot: hier.

Ich kann die Randfarbe des input beim Fokussieren und beim Verlassen animieren, aber ich habe Schwierigkeiten, die Hintergrundfarbe des äußeren Elements ebenfalls zu ändern. Hier ist der aktuell verwendete Code:

    $(document).ready(function () {

        $("input").focus(function () {
            $(this).animate({
                borderTopColor: "#7dc6dd",
                borderBottomColor: "#7dc6dd",
                borderLeftColor: "#7dc6dd",
                borderRightColor: "#7dc6dd",
                color: "#555555"
            }, 500, function() {
                $(this).parent().addClass("active");
                $(this).parent().removeClass("inactive");
            });
            $(this).parent.animate({
                backgroundColor: "#e0f1fc"
            }, 500);
        }).blur(function () {
            $(this).animate({
                borderTopColor: "#c1c5c8",
                borderBottomColor: "#c1c5c8",
                borderLeftColor: "#c1c5c8",
                borderRightColor: "#c1c5c8",
                color: "#aeaeae"
            }, 500, function() {
                $(this).parent().addClass("inactive");
                $(this).parent().removeClass("active");
            });
            $(this).parent.animate({
                backgroundColor: "#f2f5f7"
            }, 500);
        });

});

Obwohl die Änderung der .parent() Klasse funktioniert, kann ich die Hintergrundfarbe nicht animieren.

Vielen Dank im Voraus für jede Hilfe.

Answer 1

Das Ändern von parent zu parent() hat bei mir funktioniert:

http://jsfiddle.net/marcosfromero/BteHf/

Answer 2

Ich denke, du hast ein Problem in dieser Zeile..du hast einfach Klammern vergessen..ändere das

$(this).parent.animate({                 
            backgroundColor: "#e0f1fc"}, 500); 

.

zu diesem..

 $(this).parent().animate({                 
           backgroundColor: "#e0f1fc" }, 500);