Арчі Гудвін jQuery анімація для атрибутів color, background та border - плагін BitstormAnimateColor

Авторизація

Рубрики блогу

  • Public / Загальні теми
  • Новина + Думка
  • Роздуми
  • Уроки чи поради
  • Це цікаво
  • Гумор
  • Креатив
  • Рецензія
  • Особистість
  • Притчі, історії
  • Новини сайту
  • Special / СпецРубрики
  • Записки вебмайстра
  • Питання дизайну
  • Мій ПК
  • MS Office та VBA
  • Інші офісні програми
  • Diary / Особистий щоденник
  • Щоденник

    • Рекомендуємо

    Хмара тегів

    Вустами великих

    jQuery анімація для атрибутів color, background та border - плагін BitstormAnimateColor

    анімація

    Казкова функція jQuery.animate()дозволяє пересувати об'єкти, змінювати їх розміри, анімувати перехід для практично будь-якої CSS властивості, на жаль крім кольору тексту (color), кольору заливки (background-color) і кольору кордону об'єкта (border-color). Виправити цей недогляд стандартного функціоналу jQuery дозволяє плагін BitstormAnimateColor або його іншу назву jquery.animate-colors.

    Приклади звернень до умовного елементу з id demodiv через плагін:

    Анімація кольору шрифту:

    Анімація кольору заливки:

    Анімація кольору межі елемента:

    Анімація певної частини межі елемента(нижня - borderBottomColor, верхня - borderTopColor, права - borderRightColor, ліва - borderLeftColor):

    Анімація кольору посилання при наведенні:

    Цей код анімує колір всіх посилань на сторінці, якщо необхідно задати анімацію кольору посилання елемента з класом, наприклад, link, то потрібно змінити код звернення, а саме замінити рядок:

    Якщо захочеться анімуватиколір всіх посилань, які входять до певного блоку, позначеного, наприклад, класом divbox, то звернення до коду потрібно буде замінити з

    Анімація фонової заливки кнопки/посилання при наведенні:

    За структурою код аналогічний минулому прикладу, тільки тут ми використовували властивістьbackgroundColorзамість простоcolor, їх можна використовувати паралельно або експериментувати в комбінації з властивостями кольору кордонуborderColor.

    У коді йде звернення до посилання з класом ReadMore, як звертатися до інших елементів ми розібрали з прикладу властивостіcolor

    Анімація кольору об'єкта або його заливки при натисканні іншого

    По суті, код мало чим відрізнятиметься, від того, що ми вже бачили вище, тільки тепер анімація буде не за подією hover, а за подією click, та й анімацію стилю у разі кліку резонней задавати іншому об'єкту, а не самій кнопці. Як приклад, візьмемо кнопку з класомcolorFuncі будемо звертатися до блоку з класомcolorMe:

    "Потроху про все і все, про небагато" - саме такий слоган, мабуть, є найкращим визначенням тематики блогу. Тут пишу про те, що для мене цікаво чи важливо, власне тому розкид тематик дуже широкий – від роздумів на філософські теми та смішних історій, до конкретних інструкцій чи аналізу подій.

    MS Office та VBA– ця рубрика містить цікаві рішення, маловідомі функції та можливості, надбудови та макроси, загалом, все те, що може зробити вашу роботу в пакеті програм MS Office (у першу чергу - Excel, Word , Access, PowerPoint) є більш ефективною.

    Інші офісні програми– рубрика про програми для ведення обліку (конфігурації, платформи, зовнішні звіти для 1C), здачізвітності (MeDoc, БестЗвіт) та статистичного аналізу даних (SPSS), також тут можна знайти огляди програмного забезпечення для роботи з периферійними пристроями. Згорнути