javascript - 如何在滚动上只制作 1 次动画

标签 javascript jquery html css

这是我的代码:fiddle

const ratingcount = document.querySelectorAll('.ratingcount');
const totalratingcounter = ratingcount.length;

var stopNow = totalratingcounter

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

function countEach() {
    $('.ratingcount').each(function() {
        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;
        } 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>
<h1>
Follow my steps, Scroll down to middle
</h1>
<span class="ratingcount">5.6</span><br/>
<span class="ratingcount">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/>

<span class="ratingcount">5.6</span><br/>
<span class="ratingcount">5.6</span>
<h1>NOW SCROLL UP AGAIN and  then scroll down 
</h1>

<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/>

<h1>
Now see this is not working 
</h1>
<span class="ratingcount">5.6</span><br/>
<span class="ratingcount">5.6</span>

问题。

const ratingcount = document.querySelectorAll('.ratingcount');
const totalratingcounter = ratingcount.length;

此代码计算ratingcount类的数量。

并且此代码在执行等于类数的动画后停止动画

var stopNow = totalratingcounter

够公平了吧?但是,问题是,一个数字可以多次做动画,而另一个数字不能做。

喜欢:如果我向下滚动到中间的数字,它就会播放动画。

然后,我没有滚动到底部,而是向上滚动然后再次向下滚动。 然后中间的数字再次做动画,但底部的数字不这样做。

最佳答案

好吧,如果我没理解错的话——您希望每个评分计数器在屏幕上首次显示时动画一次。要实现这一点,您所要做的就是从函数 countEach() 中删除 else if() {...},正如我在下面所做的那样:

const ratingcount = document.querySelectorAll('.ratingcount');
const totalratingcounter = ratingcount.length;

var stopNow = totalratingcounter

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

function countEach() {
    $('.ratingcount').each(function() {
        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;
        }/* 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>
<h1>
Follow my steps, Scroll down to middle
</h1>
<span class="ratingcount">5.6</span><br/>
<span class="ratingcount">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/>

<span class="ratingcount">5.6</span><br/>
<span class="ratingcount">5.6</span>
<h1>NOW SCROLL UP AGAIN and  then scroll down 
</h1>

<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/>

<h1>
Now see this is not working 
</h1>
<span class="ratingcount">5.6</span><br/>
<span class="ratingcount">5.6</span>

关于javascript - 如何在滚动上只制作 1 次动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44746654/

相关文章:

javascript - 奇怪的类属性行为

javascript - 如何根据第一个流对两个流进行分组和组合?

jquery modernizr margin 0 自动不工作

html - 完全用 Flash 构建的网站是否仍然对 SEO 友好并在搜索引擎中可见?

html - 如何显示CSS文件中所有没有定义的类?

javascript - 浏览器如何以及何时对文档的 DOM 实现实时更改?

javascript - 如何使用 CSS 使边框底线更长

javascript - 通过jquery访问动态元素

jquery ui防止Sortable内嵌套Droppable的传播

html - 如何将 Nav、Title 和 Image 放在一行?