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：計數器，棘手的問題與效果聰明的人

回答

相關問題