我有一个问题与一个重复动画,我需要插入网页。
我用动画在网页上显示一个数列。每次我将鼠标悬停在部分上时,只需要调用这个动画函数,但是下面的代码的行为方式很奇怪。动画第一次正确执行,但在动画结束后执行某种回滚,以相反的方式执行动画,返回值1。
我使用的代码报告如下:
$("#numberFarm").hover(function() {
$('.countIncrement .count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="numberFarm">
<div class="container">
<h2>i nostri numeri</h2>
<div class="row">
<div class="col-xs-4">
<div class="box_icon"><img src="/assets/images/transport_icon.png" /></div>
<div class="divCountIncrement">
<h4 class="countIncrement"><span class="count">38</span> <br/><span class="numberDesc">veicoli</h4></div></div>
<div class="col-xs-4"> <div class="box_icon"><img src="/assets/images/persons_icon.png" /></div> <div class="divCountIncrement"><h4 class="countIncrement"><span class="count">43</span> <br/><span class="numberDesc">staff</span></h4>
</div>
</div>
<div class="col-xs-4">
<div class="box_icon"><img src="/assets/images/kilo_icon.png" /></div>
<div class="divCountIncrement">
<h4 class="countIncrement"><span class="count">2</span> <br/><span class="numberDesc">milioni di km percorsi</span></h4>
</div>
</div>
</div>
</div>
</section>
你对这种奇怪的行为有什么解释吗?