Jquery使用延迟为相同的css属性设置动画

Question

我想将css属性margin top设置为两次，首先是它将为'10'，然后我想开始第二个动画直到达到'0'。我的代码几乎可以工作，但第二个动画不会立即开始，第二个动画会重复4次。

 $(window).bind('scroll', function() {
  if($(window).scrollTop() >= $("#holder").offset().top + $("#holder").outerHeight() - window.innerHeight) {

   $('#holder').animate({'margin-top': '10'}, 300).delay(300).animate({'margin-top': '0'}, 900);

HTML：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-3 nopadding">
            <div class="ourStoryBox">
                <div id="holder">

                </div>
            </div>
        </div>

css：

 #holder {
  position: absolute;
  margin-top: 299px;
  height: 299px;
  width: auto;
  max-width: 100%;
  min-width: 100%;
  background-image: url("../images/blurredBoxBig.png");
  }