To jest mój kod: Fiddle

countEach()
$(window).on('scroll', function(e) {
    countEach()
})

function countEach() {
    $('.count').each(function() {
        if (showOnScreen(this) && $(this).attr('show') != 'false') {
            console.log($(this).text())
            console.log($(this).attr('show'))
            $(this).attr('show', 'false')
            numberAnimate(this)
        } else if (!showOnScreen(this)) {
            $(this).attr('show', 'true')
        }
    })
}

function showOnScreen(target) {

    if ($(window).scrollTop() + $(window).height() >= $(target).offset().top)
        return true;
    else
        return false;
}

function numberAnimate(target) {
    var $this = $(target);
    jQuery({
        Counter: 0
    }).animate({
        Counter: $this.text()
    }, {
        duration: 1000,
        easing: 'swing',
        step: function() {
            $this.text(this.Counter.toFixed(1));
        }
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="count">5.6</span>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>Scroll up and then scroll down again</p>
<span class="count">5.6</span>

Problem polega na tym, że zwiększa się animacja numeru uruchomi się ponownie, jeśli przewijam się i zwalnia ponownie. Jaka jest coś, co muszę zmienić, żeby to powstrzymać? Próbowałem wiele rzeczy, ale nie jestem dobry w JavaScript.

0
John Doo 25 czerwiec 2017, 12:46

3 odpowiedzi

Najlepsza odpowiedź

Musisz zadeklarować globalny var jako stopNow = 2, więc Twoja animacja może uruchamiać tylko dwa razy i zmniejszyć je, gdy działa animacja.

var stopNow = 2;

Zaktualizuj funkcję runda w następujący sposób

function countEach() {
    $('.count').each(function() {
        //also check stopNow != 0
        if (showOnScreen(this) && $(this).attr('show') != 'false' && stopNow != 0) {
            console.log($(this).text())
            console.log($(this).attr('show'))
            $(this).attr('show', 'false')
            numberAnimate(this)
            stopNow = stopNow - 1;  //decrement stopNow
        } else if (!showOnScreen(this)) {
            $(this).attr('show', 'true')
        }
    })
}

Oto zaktualizowany interesujący skrzypce - https://jsfiddle.net/6w8ubh5y/7/

1
Raj 25 czerwiec 2017, 10:45

Zmień kod wiązania zdarzeń z:

$(window).on('scroll', function(e) {
    countEach()
})

Do

$(window).on('scroll', countEach);

I zmień funkcję count taka jak ...

function countEach() {
    $('.count').each(function() {
        ...
    });

    $(window).off('scroll', countEach); // add this line
}
0
Bharat Gupta 25 czerwiec 2017, 10:26

Użyj zmiennej globalnej. Ustaw go na false na początku. W zdarzeniu przewijania sprawdź, a jeśli jest nadal false, uruchom funkcję countEach(), a następnie zmienna zmienna do true. Lubię to:

var stop = false;

countEach();
$(window).on('scroll', function(e) {
  if(!stop){
    countEach();
    stop = true;
  }
})
1
Racil Hilan 25 czerwiec 2017, 10:00