我有三个jQuery计数器,第一个计数到150.当第一个计数时,另外两个应该是静态的,只显示值200(第二个计数器)和300(第三个计数器)。
当第一个计数器达到150时,第二个计数器应该跳入并从200计数并在300处缓和。
当发生这种情况时,第一个应该是静态的150和第三个应该是300.
因此,如果第二个达到300,则第三个应该计数到达到400.第二个应该在达到300之后是静态的。
$.easing.easeOutExpo = function(x, t, b, c, d) {
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
}
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 8000,
easing: 'easeOutExpo',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});

body {
background-color: #F46A6A;
color: #fff;
max-width: 800px;
margin: 100px auto 0;
text-align: center;
display: table;
}
.counter {
display: table-cell;
margin: 1.5%;
font-size: 50px;
background-color: #FF6F6F;
width: 200px;
border-radius: 50%;
height: 200px;
vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<div class="counter" data-count="150">0</div>
<div class="counter" data-count="85">0</div>
<div class="counter" data-count="2200">0</div>
&#13;
答案 0 :(得分:0)
你的意思是这样吗?
$.easing.easeOutExpo = function(x, t, b, c, d) {
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
}
var cnt = 0;
function count() {
var $counter = $('.counter').eq(cnt),
countTo = $counter.attr('data-count'),
duration = $counter.attr('data-duration')*1000;
$({
countNum: $counter.text()
}).animate({
countNum: countTo
},
{
duration: duration,
easing: 'easeOutExpo',
step: function() {
$counter.text(Math.floor(this.countNum));
},
complete: function() {
$counter.text(this.countNum);
cnt++;
if (cnt < $('.counter').length) {
// replace the next counter's data-count here if you want to continue instead
count();
}
}
});
}
count()
&#13;
body {
background-color: #F46A6A;
color: #fff;
max-width: 800px;
margin: 100px auto 0;
text-align: center;
display: table;
}
.counter {
display: table-cell;
margin: 1.5%;
font-size: 50px;
background-color: #FF6F6F;
width: 200px;
border-radius: 50%;
height: 200px;
vertical-align: middle;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="counter" id="cnt0" data-count="150" data-duration="10">0</div>
<div class="counter" id="cnt1" data-count="85" data-duration="20">0</div>
<div class="counter" id="cnt2" data-count="2200" data-duration="5">0</div>
&#13;