NiceSEO’s VKontakte Crossposter

Бесплатный плагин для Wordpress для автоматического кросспостинга в паблик ВКонтакте

Простейший анимированный «спойлер» на чистом JavaScript!

niceseo-animated-spoiler

Привет, мои дорогие. Сейчас мы сделаем очень простой и полнофункциональный спойлер, раскрывающийся плавно, с анимацией, с одной строкой CSS и одной строкой JS. Безо всякий тяжеловесных JQuery!

Что именно делаем? Вот такую фишку:

23-02-2014_16-38-00

То есть имеется некий скрытый текст, который нужно открыть, нажимая по кнопке.

Говоря более техническим языком, изменяем с помощью JavaScript высоту скрытого блока и плавно убираем div с кнопкой. Плавность достигается с помощью CSS3-анимации. Никакие JQyery и MooTools не используются. Не мучайте народ, делайте легкие, удобные и красивые скрипты на чистом CSS3 и JavaScript. Кода там — по одной строчке:

JavaScript:

CSS:

HTML:

Всё! Можете скачать демо-пример и тестить. Всё просто, меньше килобайта кода. Это вам не мучать пользователя различными JQuery!

P.S. Так же в данном примере исправлен косяк с невозможностью плавной смены height через transform от 0 либо какого-то значения до auto!

Статью подготовил linur, Специально для NiceSEO.ru, 23 февраля 2014 года. При копировании не забывайте о ссылке на источник.

Ключевые слова: , , ,

Я также состою в:
Лучшая веб-студия!
Яндекс.Метрика
© 2011-2018 NiceSeo.ru