JQuery - 當孩子有焦點時對父進行操作

Question

我在一個頁面上有多個div，而該頁面又包含多個輸入。我想更改任何有子對話框的div的背景，並且在焦點移動到的另一個 div的輸入子對象時再將其改回。到目前爲止，我有以下幾點：

HTML：

<div class="explain" id="block1"> 
    <asp:TextBox ID="TextBox1" runat="server" TabIndex="1"></asp:TextBox> 
    <asp:TextBox ID="TextBox2" runat="server" TabIndex="2"></asp:TextBox>  
</div> 

<div class="explain" id="block2">  
    <asp:TextBox ID="TextBox3" runat="server" TabIndex="3"></asp:TextBox> 
    <asp:TextBox ID="TextBox4" runat="server" TabIndex="4"></asp:TextBox>     
</div> 

JQuery的：

<script> 
    $(document).ready(function() { 

    $(document).on('focusin', '.explain', function() { 
     if (true) { 
      $(this).animate({ 
       backgroundColor: "#e0f4fb" 
      }, 1000); 
     } 
    }); 

    $(document).on('blur', '.explain', function() { 
      $(this).animate({ 
       backgroundColor: "#ffffff" 
      }, 1000); 
    }); 

    }); 
</script> 

此工作正常，如果從一個DIV的輸入孩子變成另一個我選項卡。例如，如果我將焦點從'TextBox1'移動到'TextBox3'，'block1'將淡出，'block2'將淡入。這太棒了。

但是，當我嘗試在同一個div內更改爲不同的子輸入時出現問題。例如，如果我從「文本框1」選項卡選擇到「文本框2」，則會再次在父級上激發「焦點外」動畫，然後再次退出「塊1」。

那麼，有什麼辦法可以改變父div的背景顏色，當它的一個子輸入有焦點，然後只在移動到另一個div的輸入子時纔將其恢復回來？

Answer 1

最後，解決我的問題是Sunland提供的簡單答案。在開始下一個動畫之前添加.stop（）就可以解決問題。

I.e.使用此：

$(this).stop().animate({ 
    backgroundColor: "#e0f4fb" 
}, 1000); 

，而不是這樣的：

$(this).animate({ 
    backgroundColor: "#e0f4fb" 
}, 1000); 

工作示例可以在這個小提琴可見再次http://jsfiddle.net/Ly7jyvuf/8/

由於桑蘭都與基因有關的此問題的幫助。

Answer 2

您是否嘗試過直接針對輸入，並觸發時改變父母，就像這樣：

$('input').on('focusin', function() { 
    $(this).parents('.explain').animate({ 
      backgroundColor: "#e0f4fb" 
     }, 1000); 
}); 

而就模糊：

$('input').on('blur', function() { 
    $(this).parents('.explain').animate({ 
      backgroundColor: "#ffffff" 
     }, 1000); 
}); 

下面就來證明這一點http://jsfiddle.net/m0nk3y/31yjdogc/1/小提琴。你將需要jQueryUI，以防萬一你還沒有包含它。

我希望這會有所幫助。祝你好運。