Как анимировать отдельно минуты и секуды?

Question

[Александр Коновалов]

Добрый день! У меня есть таймер, хочу прикрутить к нему анимацию. Такой код:

$('#timer span').text(minute + ':' + second).
css({'marginTop':'-20px','opacity':'0'}).
animate({'marginTop':'0px','opacity':'1'});

Проблема в том, что анимируется весь блок таймера, а надо, чтобы анимировались отдельно секунды и минуты

Таймер:

<div id="timer" class="winner1" style="color:#fff; font-weight:bold;"><span id="timer-1" class="timer-digit">0</span><span id="timer-2" class="timer-digit">2</span>:<span id="timer-3" class="timer-digit">0</span><span id="timer-4" class="timer-digit">0</span>
                                            </div>

Answer 1

[Григорий]

Ваш код - бред, на мой взгляд... в диве четыре спана, и вы присваиваете каждому спану minute + ':' + second, затем пытаетесь поднять все спаны на 20 пикселей вверх, и в конце, зачем то, задаете анимацию движения всех этих спанов на 20 пикселей вниз, то есть в исходную позицию... Что вы хотите сделать? Пока не пойму, не смогу помочь...

Comments

[Александр Коновалов]

Григорий пытаюсь сделать анимацию цифр, чтобы они появлялись сверху и спускались вниз

[Григорий]

Александр Коновалов: Вот. Думаю с выездом цифр сверху вниз разберетесь. Главное здесь понятен принцип.

Answer 2

[Кирилл Туровников]

Какая именно анимация? Вы уже задавали вопрос: как сделать анимацию таймера, сейчас он выезжает сверху вниз и проявляется, откуда берутся в нем сами числа? анимацию нужно привязывать именно к кэлбэкам этой библиотеки/скрипта.

Comments

[Александр Коновалов]

Кирилл Туровников

timer = config.gameDuration;
																							timerID = setInterval(function() {
																								timer--;

																								var min = Math.floor(timer/60);
																								var sec = timer%60;
																								sec = sec.toString();
																								sec = sec.substr(0, 2);
																								
																								io.emit('timer', { timer: min+":"+sec});