Question

I’m currently working on a login screen where I am using jQuery and jQuery UI like to animate the inputs on .focus() and .blur() using the .animate() effect.

The structure of the form is:

<form action="http://localhost/.../control/auth_login" class="login" enctype="multipart/form-data" method="post"> 
    <div id="inner" class="inactive"> 
        <input name="name" size="30" type="text" value="Username"> 
    </div> 
    <div id="inner" class="inactive"> 
        <input name="pass" size="30" type="password" value="password"> 
    </div>
    <input type="submit" value="Login" name="login" class="button">
</form>

I am using outer elements around the inputs to add a thick ‘extra border’, you can see a screenshot here: here.

I am able to animate the input‘s border colour on blur and on focus, but I am struggling to get the background colour of the outer element to also change. Here is the code I am currently using:

<script type="text/javascript">
    $(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);
        });

});
</script>

Although the changing of the .parent() class works, I just can’t get the background colour of it to animate.

Thanks in advance for any help.

Answer 1

Changing parent for parent() worked for me:

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