There is a scrl function that starts another function (movement of an element on the ring page) if we scrolled to a certain position. But that's only if we twist the page again, the element, having reached the end, will not stop, but will continue to change its position, that is, the ring function will continue to run.

  • How to stop the function?
  • How to make the ring function run only once at the moment when the condition worked?

 var h = document.documentElement.clientHeight, hh = parseInt($('.wrapdiv').css('height')); function ring() { $('.ring').delay(500).animate({ //1 left: 187, }, 800); $('.ring').delay(500).animate({ //2 left: 300, }, 800); $('.ring').delay(500).animate({ //2.1 left: 394, }, 800); $('.ring').animate({ //3 left: 481, top: 100, }, 800); }; function scrl() { var top = $(window).scrollTop(); if (top > ((h + hh) / 2)) { ring(); } //внутри этой функции может быть куча дургих мне нужно остановить только функцию ring() }; function myfoo() { $('.firstdiv').css('height', h); }; $(window).scroll(scrl); $(window).resize(myfoo); $(document).ready(myfoo); 
 .parentring { display: block; position: relative; width: 1050px; height: 800px; margin: 0 auto; } .ring { display: block; position: absolute; top: 0px; height: 24px; width: 24px; border-radius: 50%; background: #DCDCDC; border: 4px solid #F1F1F1; left: 87px; box-shadow: 0 0 2px #006492, inset 0 0 7px #153F53; } .wrapdiv { display: block; position: relative; overflow: hidden; height: 244px; background: #CE93D8; color: #fff; padding: 0 25px; } .firstdiv { background: #FFB74D; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="firstdiv"></div> <div class="wrapdiv">Значимость этих проблем настолько очевидна, что укрепление и развитие структуры влечет за собой процесс внедрения и модернизации систем массового участия. Идейные соображения высшего порядка, а также постоянный количественный рост и сфера нашей активности обеспечивает широкому кругу (специалистов) участие в формировании новых предложений. Идейные соображения высшего порядка, а также новая модель организационной деятельности представляет собой интересный эксперимент проверки систем массового участия. зации соответствующий условий активизации. Идейные соображения высшего порядка, а также укрепление и развитие структуры позволяет оценить значение новых предложений. Равным образом укрепление и развитие структуры требуют от нас анализа системы обучения кадров, соответствует насущным потребностям. С другой стороны дальнейшее развитие различных форм деятельности способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям. Не следует, однако забывать, что сложившаяся структура организации позволяет оценить значение дальнейших направлений развития. Товарищи! консультация с широким активом позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом рамки и место обучения кадров позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. </div> <div class="parentring"> <div class="ring"></div> </div>

  • scroll event occurs on every scroll step - Grundy
  • that's why I wrote it to find the indentation from the top, to start the function at the right moment, but it runs all the time, because the scrolling works. and the question is higher) - Evgeny Shevtsov
  • so don't run it a second time - Grundy
  • that is, when I finish the position I need to pull the mouse out ?? - Evgeny Shevtsov
  • one
    for example, put a flag and check it - Grundy

1 answer 1

That seems to be enough))

 var h = document.documentElement.clientHeight, hh = parseInt($('.wrapdiv').css('height')); i=0; function ring() { if(i<1){ $('.ring').delay(500).animate({ //1 left: 187, }, 800); $('.ring').delay(500).animate({ //2 left: 300, }, 800); $('.ring').delay(500).animate({ //2.1 left: 394, }, 800); $('.ring').animate({ //3 left: 481, top: 100, }, 800); } return i++; }; function scrl() { var top = $(window).scrollTop(); if (top > ((h + hh) / 2)) { ring(); } //внутри этой функции может быть куча дургих мне нужно остановить только функцию ring() }; function myfoo() { $('.firstdiv').css('height', h); }; $(window).scroll(scrl); $(window).resize(myfoo); $(document).ready(myfoo); 
 .parentring { display: block; position: relative; width: 1050px; height: 800px; margin: 0 auto; } .ring { display: block; position: absolute; top: 0px; height: 24px; width: 24px; border-radius: 50%; background: #DCDCDC; border: 4px solid #F1F1F1; left: 87px; box-shadow: 0 0 2px #006492, inset 0 0 7px #153F53; } .wrapdiv { display: block; position: relative; overflow: hidden; height: 244px; background: #CE93D8; color: #fff; padding: 0 25px; } .firstdiv { background: #FFB74D; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="firstdiv"></div> <div class="wrapdiv">Значимость этих проблем настолько очевидна, что укрепление и развитие структуры влечет за собой процесс внедрения и модернизации систем массового участия. Идейные соображения высшего порядка, а также постоянный количественный рост и сфера нашей активности обеспечивает широкому кругу (специалистов) участие в формировании новых предложений. Идейные соображения высшего порядка, а также новая модель организационной деятельности представляет собой интересный эксперимент проверки систем массового участия. зации соответствующий условий активизации. Идейные соображения высшего порядка, а также укрепление и развитие структуры позволяет оценить значение новых предложений. Равным образом укрепление и развитие структуры требуют от нас анализа системы обучения кадров, соответствует насущным потребностям. С другой стороны дальнейшее развитие различных форм деятельности способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям. Не следует, однако забывать, что сложившаяся структура организации позволяет оценить значение дальнейших направлений развития. Товарищи! консультация с широким активом позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом рамки и место обучения кадров позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. </div> <div class="parentring"> <div class="ring"></div> </div>