英雄单位引导与悬停效果

Question

我正在进行构建，我正在使用英雄单元进行引导。其中的图像是响应的，我正在尝试使用英雄单位内的div添加悬停动画，但不能使div内部响应英雄单位内的缩放。

<script>
  $(function() {
      $("#dequeue div").hover(function(){
          $(this).animate({ right:'50px',
  opacity:'0.5',
  height:'150px',
  width:'200px' });
      }, function() {
          $(this).animate({ right:'0px',
  opacity:'1',
  height:'100px',
  width:'150px' });
      });
  });
</script>

  <div class="hero-unit">
    <img src="img/homepage.jpg" alt="">
          <div id="dequeue" class="blocks">
           <div class="one"></div>
        </div>
  </div>

#dequeue {
    position: relative; top:44px;  float: left; z-index: 1000; 
}
.blocks div { width: 200px; height: 100px; margin: 0 0 5px 0; }
.one { background: #ccc; position: relative; z-index: 1000;}