jQuery: счетчик, хитрая проблема с эффектами для умных людей - PullRequest
Новая
       10

jQuery: счетчик, хитрая проблема с эффектами для умных людей

1 голос
/ 14 апреля 2010

Я сделал этот счетчик, который я считаю крутым, потому что он только вносит видимые изменения в числа, изменяемые между каждым его срабатыванием.

Это код 

// 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);
    });
});

Markup: 

<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. Это будет выглядеть глупо.

При добавлении нескольких счетчиков будет учитываться только один из счетчиков. При удалении функции очереди будут работать оба счетчика, но, как вы можете себе представить, задержка текста () исчезнет (так как это не fx-категория).

Вероятно, немного сложно разобраться, как я могу иметь несколько счетчиков, и все же отложить функцию text () на 100 мс, но я надеялся, что здесь есть кто-то, у кого есть запасной мозг для этих вещей;) *

Вы можете увидеть (NSFW) задачу демо здесь:

Просто посмотрите под значками общего доступа, и вы заметите, что текст меняется, пока объекты исчезают.

Нужна помощь для решения этой проблемы. Я хотел бы вызвать функцию text () после того, как текст исчез до непрозрачности 0, а затем исчезнуть после выполнения text ().

Спасибо за ваше время.

1 Ответ

0 голосов
/ 14 апреля 2010

Как сказано в комментариях «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
...