Question

该页码加载后立即动画。我不想动画它直到页面滚动到该数字的div。这是我的jsfiddle工作 https://jsfiddle.net/sagartt/cvv8sw4q

和代码是

<div class="countff">
  <span class="Count">15</span>
  <p style="margin-left: 30px;">+</p>
  <p>COUNTRIES</p>
</div>
<div class="countf">
  <span class="Count" style="left:60px;">250</span>
  <p style="margin-left: 30px;">+</p>
  <p>ARTISANS</p>
</div>
<div class="countf">
  <span class="Count">23</span>
  <p style="margin-left: 30px;">+</p>
  <P>EXPERIENCE</P>
</div>
<div class="countf">
  <span class="Count" style="left:30px;">6000</span>
  <P style="margin-left: 30px;position: relative;
    left: 20px;">Sq.ft</P>
  <P>STUDIO</P>
</div>

.countff {
  margin-top: 400px;
}
<script>
jQuery(document).ready(function() {



  jQuery('.Count').each(function() {
    var jQuerythis = $(this);
    jQuery({
      Counter: 0
    }).animate({
      Counter: jQuerythis.text()
    }, {
      duration: 1000,
      easing: 'swing',
      step: function() {
        jQuerythis.text(Math.ceil(this.Counter));
      }
    });
  });
})

</script>

Answer 1

请检查下面的解决方案我在你的css和html类中做了一些修改，如果你认为出了什么问题，请更正它们 - 但你想要的功能是按预期工作 -

jQuery(document).ready(function() {

$(".countf").hover(function(){
    var jQuerythis = $(this).find('.Count');
    jQuery({
      Counter: 0
    }).animate({
      Counter: jQuerythis.text()
    }, {
      duration: 1000,
      easing: 'swing',
      step: function() {
        jQuerythis.text(Math.ceil(this.Counter));
      }
  });
    }, function(){
        
    });

 
})

.countff {
  margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countf">
  <span class="Count">15</span>
  <p style="margin-left: 30px;">+</p>
  <p>COUNTRIES</p>
</div>
<div class="countf">
  <span class="Count" style="left:60px;">250</span>
  <p style="margin-left: 30px;">+</p>
  <p>ARTISANS</p>
</div>
<div class="countf">
  <span class="Count">23</span>
  <p style="margin-left: 30px;">+</p>
  <P>EXPERIENCE</P>
</div>
<div class="countf">
  <span class="Count" style="left:30px;">6000</span>
  <P style="margin-left: 30px;position: relative;
    left: 20px;">Sq.ft</P>
  <P>STUDIO</P>
</div>

如果仅在页面滚动到此数字div时如何设置此数字的动画？

1 个答案: