使用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);