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

我做了这个计数器，我认为很酷，因为它只有使可见的变化，每次被触发时改变的数字。jQuery：计数器，棘手的问题与效果聪明的人

这是代码

// 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>

的问题是，我以前使用队列（）函数以延迟（）$（本）的.text（v.charAt（ F））; （没有队列的文本（） - 函数不会因为它不在fx catergory中而被延迟），以便在对象已经渐变为不透明度= 0之前更新文本。这看起来很愚蠢。

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

这可能是一个棘手的问题，我怎么可以有多个计数器，并仍然延迟文本（） - 功能100毫秒，但我希望有人在这里有这些东西的剩余脑容量;）

你可以在这里看到（NSFW）problem演示：

看看共享图标的下面，你会发现，虽然对象的文本改变淡出。

寻找一些帮助来解决这个问题。一旦文本淡化为不透明度0，我想调用text（）函数，然后在执行text（）后淡入。

谢谢你的时间。

来源

2010-04-13 Marius

您的演示完全不安全！ – 2010-04-13 23:29:21

在jQuery中的效果有回调函数在效果结束后触发。照顾它。 – Ben 2010-04-13 23:44:27

为“omfgroflmao”在评论中说，效果有回调：

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

例如，参见fadeOut docs

编辑：在您的例子，它也可能是更清洁存储使用.data()计数器而不是从跨度元素构建它。

// 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-14 00:34:32

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

回答

相关问题