在开始新动画之前，在速度（“停止”，“真”）之后重置CSS值

Question

仅供参考。实际代码看起来不同。

我已经让图像在容器内滚动得很好。在循环中上下。看起来很棒。但是，如果我更改容器的高度（由我的媒体查询调用），则计算将被抛出不同步。我想重置滚动，但它不起作用。我也尝试过像scrollingImage.css（{transform：'translateY（0px）'}）;停止动画后再调整大小之前，但没有运气。如果我以新的大小重新加载页面（所以容器是300而不是500），它的效果很好。但是，如果它在浏览器调整大小时动态发生。任何帮助将不胜感激。

  /********** THE CSS **********/
  .container{
    background-color: red;
    height: 400px;
    width: 400px;
    overflow: hidden;
  }
  .container img{
      width: 100%;
      height: auto;
  }
  @media all and (max-width: 400px) {
    .container{
      height: 200px;
      width: 200px;
    }
  }


  /********** THE HTML **********/
  <div class="container">
      <img src="http://upload.wikimedia.org/wikipedia/commons/7/76/Rope_swing_really_tall_Summit_NJ.jpg"/>
  </div>


  /********** THE JAVASCRIPT (jquery and velocity already loaded) **********/
  function enableScrollingContent() {
    var container = $('.container');
    var scrollingImage = container.find('img');
    scrollingImage.velocity("stop", true);
    var offsetY = -scrollingImage.height() + (container.height());
    scrollingImage.velocity({ translateY: offsetY }, { duration: 5000, loop: true });
  }
  enableScrollingContent();
  $(window).resize(enableScrollingContent);