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