The following is an example of a function that starts the animation after we scroll down to 300рх .

At the end, the round elements turn into ovals, and the red block becomes on the right.

Question : how to make this function reset to zero if scrolled up to the position less than 300рх , and started again if we go down to the position above 300рх ?

 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); 
 .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; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> Начинай крутить! <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>

  • Why two identical if? and it is better to make the function clean, better function ring (i) {...} And then var i = 0; ring (i); ";" after brackets if are not needed. Well, according to Voros, it is obvious to format the else in if (top> 300) ... inverse values ​​for animations - sinneren

1 answer 1

Remove these lines

 i = 0; if (i < 1) { return i++;
Well and brackets} do not forget to remove the extra

  • change and check how the function will work. The question was how to reset it and run it again if we return to the position> 300px, and to start it every time the scrolling event fires - Evgeny Shevtsov