jQuery：计数器，聪明人效果的棘手问题答案

【问题标题】：jQuery: Counter, Tricky problem with effects for brainy peoplejQuery：计数器，聪明人效果的棘手问题
【发布时间】：2010-04-13 23:24:50
【问题描述】：

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

这是代码

// 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() 函数来延迟() $(this).text(v.charAt(f));延迟 100 毫秒，（没有队列，text() 函数不会因为它不在 fx 类别中而延迟），以便在对象褪色到 opacity = 0 之前更新文本。这看起来很愚蠢。

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

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

您可以在此处查看 (NSFW) problem 演示：

只需查看共享图标下方，您就会注意到文本在对象淡出时发生变化。

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

感谢您的宝贵时间。

【问题讨论】：

您的演示完全不适合工作！
jquery 中的效果有回调函数在效果结束后触发。照顾好它。

标签： jquery queue effects counter

【解决方案1】：

正如 'omfgroflmao' 在 cmets 中所说，效果有回调：

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

例如查看fadeOut docs

编辑：在您的示例中，使用 .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

【讨论】：