Создать эффект нажатия кнопки, показанный в этом демонстрационном видео приложения, с jQuery и / или CSS?

Question

http://youtu.be/sXqXpwyBI1k

Обратите внимание: когда парень нажимает на большинство кнопок, кнопка быстро меняется на более светлый оттенок своего естественного цвета, затем быстро возвращается к своему обычному цвету, и в то же время ее граница оживляется, как будто есть еще один элемент с просто граница за кнопкой, которая увеличивается в ширину и высоту и исчезает.

Я уже некоторое время пытаюсь создать этот эффект нажатия кнопки и .. вроде как отстой .. Итак, я хотел знать, можно ли это сделать с помощью jQuery и / или CSS, или кто-нибудь видел его сделано где-то в интернете или есть пример?

Эффект возникает при вводе имени нового игрока, смотрите на этом экране.

Answer 1

[править] Мне было любопытно посмотреть, смогу ли я получить какую-то расширяющуюся границу в CSS, поэтому я добавил, что к скрипке

Хороший ответ Дракониса, jquery animate будет хорошо работать со старыми браузерами,переходы, однако, будут более плавными, поэтому, если вы ориентируетесь на современные Safari, Firefox и Chrome, они отлично работают.Вот небольшой пример для анимированной кнопки (это при наведении курсора, а не нажатии)

http://jsfiddle.net/dTqkK/2/

Конечно, сочетание обоих, вероятно, лучший ответ, используя что-то вроде Modernizr , чтобы определить, может ли браузер поддерживать переходы CSS и переходить на javascript, если это невозможно.

Answer 2

Я думаю, что этот вид анимации немного сложен для CSS, вам могут понадобиться функции jquery animate.Я бы сделал это следующим образом: поместите контейнерный контейнер (имеет границу, как в видео) для каждой кнопки с отображением: нет и абсолютная позиция (поэтому, когда мы изменяем размер других элементов, эффект не будет), когда кнопка нажата, отобразите этот контейнерный контейнер с .fadeIn затем анимируйте высоту и ширину этого div в значение высоты и ширины кнопки с .animate, затем .fadeout контейнерный div.При этом используйте функцию .css для кнопки, чтобы изменить ее цвет, а функцию обратного вызова измените ее на нормальный цвет и сделайте ширину и высоту контейнера div немного больше, чем кнопка, когда анимация завершится.

Вы можете сделать этово многих отношениях, так как это анимация, вот как я бы это сделал.