滚动到指定地点时，如果我们再次回到这个地方，启动该功能，如何重置它并重新开始？

Question

下面，我举例说明了向下滚动到300 pixels时启动动画的功能。

在圆形结束时，元素会转换为椭圆形，红色块会转移到右侧。

问题：如果向上滚动到小于300像素的位置，如何重置此功能，如果省略位置超过300 pixels，如何重新启动？

＆＃13;

＆＃13;

i = 0;

function ring() {
  if (i < 1) {
    $('.ring').delay(500).animate({ //1
        left: 287,
      },
      500, 'linear');
    $('.ring').delay(500).animate({ //2
        left: 500,
      },
      500, 'linear');
    $('.ring').delay(500).animate({ //2.1
        left: 594,
      },
      200, 'linear')
  };
  if (i < 1) {
    $('.views-row-1').animate({ //9
        width: 140,
        top: -14,
        boxShadow: "0 0 8px",

      },
      500);
    $('.views-row-1').delay(500).animate({ //9
        width: 115,
        top: 0,
        boxShadow: "0 0 0",
      },
      500);
    $('.views-row-2').delay(1000).animate({ //9
        width: 140,
        top: -14,
        boxShadow: "0 0 8px",
      },
      500);
    $('.views-row-2').delay(500).animate({ //9
        width: 115,
        top: 0,
        boxShadow: "0 0 0",
      },
      500);
    $('.views-row-3').delay(2000).animate({ //9
        width: 140,
        top: -14,
        boxShadow: "0 0 8px",
      },
      500)
  };

  return i++;
}


function scr() {
  var top = $(window).scrollTop();
  if (top > 300) {
    ring();
  };
}
$(window).scroll(scr);

＆＃13;

.views-row-1,
.views-row-2,
.views-row-3 {
  display: block;
  position: absolute;
  top: 15px;
  left: 15px;
  background: #ccc;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.views-row-2 {
  left: 100px;
}
.views-row-3 {
  left: 185px;
}
.ring {
  display: block;
  position: absolute;
  top: 20px;
  background: red;
  width: 20px;
  height: 20px;
  z-index: 4;
}
.parent {
  display: block;
  position: fixed;
  width: 100%;
  top: 60px;
}
body {
  height: 800px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Start to scroll down
<div class="parent">
  <div class="ring"></div>
  <div class="views-row-1"></div>
  <div class="views-row-2"></div>
  <div class="views-row-3"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要创建一个功能来重置它。 你无法自动完成它。

要做到这一点，只需设置 views-row-1 ， views-row-2 ， views-row-3 的值和响铃到初始状态。

例如，响铃会将 left 属性设置为零， views-row - * 的宽度设置为60px等。