jQuery：计数器，为聪明人提供效果的棘手问题

Question

我制作了这个我认为很酷的计数器，因为它仅对每次触发之间正在更改的数字进行可见的更改。

这是代码

// counter
$('a').click(function(){
    var u = '';
    var newStr = '';
    $('.counter').each(function(){
        var len = $(this).children('span').length;
        $(this).children('span').each(function(){
            u = u + $(this).text();
        });
        v = parseInt(u) + 1;
        v = v + '';
        for (i=v.length - 1; i >= 0; i--) {
            if (v.charAt(i) == u.charAt(i)) {
                break;
            }
        }
        slce = len - (v.length - (i + 1))
        updates = $(this).children('span').slice(slce);
        $(updates).fadeTo(100,0).delay(100).each(function(index){
            f = i + 1 + index;
            $(this).text(v.charAt(f));
        }).fadeTo(100,1);
    });
});

标记：

<span class="counter">
<span></span><span></span><span></span><span></span><span></span><span></span><span style="margin-right:4px;">9</span><span>9</span><span>9</span><span>9</span>
</span>
<a href="">Add + 1</a>

问题是我之前使用queue()函数来delay()$(this).text(v.charAt(f)); 100 毫秒（没有队列，text() 函数不会被延迟，因为它不在 fx 类别中），以便在对象褪色到不透明度 = 0 之前更新文本。这看起来很愚蠢。

添加多个计数器时，只有其中一个计数器会计数。当删除队列函数时，两个计数器都会工作，但正如您可以想象的那样，text() 的延迟将消失（因为它不是 fx 类别）。

搞清楚如何拥有多个计数器，并且仍然将 text() 函数延迟 100 毫秒可能有点棘手，但我希望这里有人有足够的大脑容量来处理这些事情；）

你可以看到一个（ NSFW）问题演示：

只需查看共享图标下方，您就会注意到文本发生了变化当物体淡出时。

寻找一些帮助来解决这个问题。我想在文本褪色到不透明度 0 后调用 text() 函数，然后在执行 text() 后淡入。

感谢您抽出时间。

Answer 1

正如“omfgroflmao”在评论中所说，效果具有回调：

$(updates).fadeOut(100, function() {
    f = i + 1 + index;
    $(this).text(v.charAt(f));
    $(this).fadeIn(100);
});

例如，请参阅 fadeOut 文档

编辑：在您的示例中，使用 .data() 存储计数器可能比从 span 元素构建计数器更干净。

// init counter
$('.counter').data('tally', 0);

// when you're incrementing
var u = $(this).data('tally') + '';
$(this).data('tally', $(this).data('tally') + 1);
var v = $(this).data('tally') + '';
// work out which span elements to update etc