1

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

这是代码

// 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 类别中而延迟），以便在对象褪色到不透明度 = 0 之前更新文本。这看起来很愚蠢。

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

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

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

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

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

感谢您的时间。

4

1 回答 1

0

正如“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
于 2010-04-14T00:34:32.300 回答