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 ＆amp; nieuws_container_right nieuws_container_left ＆amp;的 nieuws_container_right