Как прикрепить анимацию?

Question

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

Как прикрепить такую анимацию:

//Функция для красивого отображения времени.
function animation(vibor,param) {
	vibor.html(param)
		.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>

Comments

[pashted]

вы хотите чтобы двоеточие мигало раз в секунду?

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

pashted: чтобы цифры плавно перелистывались

Answer 1

[Павел Кизернис]

А почему бы не добавить анимацию

elem.css({'marginTop':'-20px','opacity':'0'}).animate({'marginTop':'0px','opacity':'1'});

в сам код счетчика?

т.к. если так
animation($(".timer-digit"), param);
то не понятно что отдавать в param...

Comments

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

Павел Кизернис

elem.css({'marginTop':'-20px','opacity':'0'}).animate({'marginTop':'0px','opacity':'1'});

а куда мне это вставить?

[Павел Кизернис]

Александр Коновалов: можно ссылку на проект?
или хотя бы код счетчика..

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

Павел Кизернис: csgoseller.ru

[Павел Кизернис]

Александр Коновалов: Попробуйте здесь:
csgoseller.ru/script.js, 134 строка

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

[Павел Кизернис]

Александр Коновалов: Правда наверное лучше будет так:

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

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

Павел Кизернис: анимация появилась, но анимируется весь блок таймера, а не отдельно минуты и секунды

[Павел Кизернис]

Александр Коновалов: ну у вас таймер выводиться так.. и минуты и секунды одной строкой сразу в div...
Скопипастил с вашего сайта:

<div id="timer" class="winner1" style="color:#fff; font-weight:bold;">01:23</div>

А вам бы лучше выводить его отдельно секудами в одном блоке и минутами в другом.
Что-то типа:

<div id="timer" class="winner1" style="color:#fff; font-weight:bold;">
<span class="timer-out min">01</span>
<span class="separator">:</span>
<span class="timer-out sec">23</span>
</div>

И тогда уже можно анимацию вешать отдельно на секунды или минуты:

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

$('#timer .separator').text(":");

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

или сразу и на то и на другое:

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

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

Павел Кизернис: теперь анимируются и минуты и секунды одновременно, а надо, чтобы когда идут секунды, минуты не анимировались, как тут - csgofast.ru