Jquery：通过悬停父对象设置子宽度的动画

我正在尝试向child div添加动画效果，使它们在悬停时稍微调整大小

我已经实现了以下html：

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

但是，我无法让它运行动画。任何帮助都将不胜感激

试试看

HTML:

---

将类nieuws_thumb_container_left&nieuws_container_right更改为nieuws_container_left&nieuws_container_right

是否在$document中执行了此操作。准备好了吗？我没有。这确实有帮助。非常感谢。我还能把第二个答案标记为正确答案吗，因为代码实际上是正确的？谢谢。虽然您的代码是正确的，但丢失的$document.ready成功了！

    $(".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 );
});

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

$(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 );
    });
});