使用jQuery动画父级

Question

我目前正在使用jQuery和jQuery UI的登录屏幕上工作，使用.animate()效果在.focus()和.blur()之间设置动画效果。

形式的结构是：

<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

我想你在这个line..you只是错过这个brackets..change

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

有问题。

到这个..

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