Sergey Goryachev: А вот и нифига =) Дело как раз в том, что свойство display анимируется дискретно. Артём: Поясняю обоим:
Изначально элемент скрыт. он не отрисован. и его содержимое тоже. Добавили класс - блок отрисовался. Содержимое отрисовалось, но оно сразу отрисовалось так, как задано классом open. Анимировать нечего.
В примере Сергея с вызовом show() jquery переключает свойство display в block, обнуляет размеры и начинает анимировать элемент. Но элемент-то уже display:block, а значит отрисован, и его содержимое тоже. Show() вызывается перед addClass, а значит внутренний элемент изначально отрисовывается красным, а потом переходит в синий.
Всё понятно? =)
Руслан: а в чем вы видите здесь проблему?
Я вижу обычный инпут с немного нестандартной маской ввода 8_-__999__-__999__-__00__-__00
Берем любой плагин маскированного ввода и делаем. Да, придется вырезать лишние пробелы при обработке номера, но куда же деваться.
Ах да, полоску внизу просто рисуем линейным градиентом на фоне.
На первый взгляд как-то так. Детально обдумывать мне сейчас лень.
Артём: Поясняю обоим:
Изначально элемент скрыт. он не отрисован. и его содержимое тоже. Добавили класс - блок отрисовался. Содержимое отрисовалось, но оно сразу отрисовалось так, как задано классом open. Анимировать нечего.
В примере Сергея с вызовом show() jquery переключает свойство display в block, обнуляет размеры и начинает анимировать элемент. Но элемент-то уже display:block, а значит отрисован, и его содержимое тоже. Show() вызывается перед addClass, а значит внутренний элемент изначально отрисовывается красным, а потом переходит в синий.
Всё понятно? =)
Вот пример техники анимирования в подобной ситуации https://jsfiddle.net/afk8aox5/
.