Jquery：通過懸停父動畫動畫孩子寬度

Question

我試圖給子div添加一個動畫效果，使它們在懸停時調整大小。

我已經實現了以下的html：

<div class="nieuws_thumb_container"> 
    <div class="nieuws_content_left"> 
    </div> 
    <div class="nieuws_content_right"> 
    <div class="pijl"> 
    </div> 
    </div> 
</div> 

而下面的jQuery代碼：

$(".nieuws_thumb_container").hover(function() { 


    $(this).find('.nieuws_thumb_container_left').animate({ 
     width: "70%" 
    }, 300); 
    $(this).find('.nieuws_thumb_container_right').animate({ 
     width: "30%" 
    }, 300); 
}); 

但是，我不能讓它運行動畫。任何幫助，將不勝感激！

Answer 1

嘗試

HTML：

<div class="nieuws_thumb_container"> 
    <div class="nieuws_content_left"> 
    </div> 
    <div class="nieuws_content_right"> 
    <div class="pijl"> 
    </div> 
    </div> 
</div> 

---

JQuery的：

$(document).ready(function(){ 
    $(".nieuws_thumb_container").hover(function() { 
     $(this).find('.nieuws_container_left').animate({ 
      width: "70%" 
     }, 300); 
     $(this).find('.nieuws_container_right').animate({ 
      width: "30%" 
     }, 300); 
    }); 
}); 

---

更改類 nieuws_thumb_container_left & nieuws_container_right到 nieuws_container_left & nieuws_container_right