Question

我正在使用登录屏幕，我正在使用jQuery和jQuery UI来使用.focus()效果为.blur()和.animate()上的输入设置动画。

表格的结构是：

<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>

我在输入周围使用外部元素来添加一个厚的“额外边框”，你可以在这里看到截图：here。

我能够在模糊和焦点上为input的边框颜色设置动画，但我正在努力让外部元素的背景颜色也发生变化。这是我目前使用的代码：

<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>

虽然.parent()类的更改有效，但我无法将其背景颜色设置为动画。

提前感谢您的帮助。

Answer 1

为parent更改parent()为我工作：

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

Answer 2

我认为你在这一行有问题..你只是错过了括号..改变这个

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

到此..

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

使用jQuery为父级制作动画

2 个答案: