Вітаю вас на своєму блозі!
Сьогодні я вам розповім як додати різних ефектів на сторінку HTML за допомогою JQuery.
Hide / Show і Toggle HTML компонент Div / Span за допомогою JQuery
На сьогоднішній день на більшість веб-сторінках є розділи, які можна приховати / показати (hide / show), а говорячи простою мовою спойлер (spoiler), клацнувши на значок цього розділу. Крім цього, ви ще можете захотіти повісити спойлер на якийсь конкретний компонент HTML, як кнопка, текстове поле або div / span. Це легко може бути зроблено за допомогою JQuery.
Припустимо, у нас є текстове поле і кнопка, і нам потрібно, щоб при натисканні на кнопку відкривалося текстове поле. Нижче наведено фрагмент коду, щоб зробити це.
У наведеному фрагменті коду ми вибираємо текстове поле, використовуючи його ідентифікатор #user і потім викликаємо функцію hide (), щоб приховати його. Зовсім просто, чи не так?
Крім того, щоб показати який компонент ми збираємося використовувати, потрібно додати наступний код:
Крім того, ви можете не тільки приховати / показати будь-який HTML компонент, а також ви можете вказати швидкість і функцію зворотного виклику, яка викликається після того, як вміст приховано або показано як на коді нижче.
Нижче показаний синтаксис методів hide () і show () зі швидкістю:
Також ви можете задати функцію-обробник, який викликається після того, як анімація завершена.
Крім того, ви можете реалізувати функцію перемикання, де при натисканні кнопки можна викликати перемикач ефекту на тезі Div або Table.
SlideUp / SlideDown за допомогою JQuery
Це простий ефект, який показує як ковзає контейнер - вниз або вгору. Просто вам потрібно викликати функції slideUp () і slideDown ().
SlideUp / SlideDown подібно до функцій hide () / show (), також можуть використовуватися різні аргументи, щоб регулювати швидкість ковзання, а також може бути викликана функція зворотного виклику.
Також ви можете використовувати функцію SlideToggle () для досягнення функціональних можливостей перемикання ковзання вгору і вниз. SlideToggle () також поставляється з тими ж аргументами що і SlideDown / SlideUp.
Анімація HTML компонентів з використанням JQuery
JQuery надає функцію animate (), за допомогою якої можна створювати свої власні анімації. Нижче наведено синтаксис цієї функції:
Ключовим аспектом цієї функції є об'єкт властивостей стилю, які будуть анімовані. Кожен ключ в рамках об'єкта є властивість стилю, також буде анимировано (наприклад: «height», «top», або «opacity»).
Значення, пов'язане з ключем є властивість, до якого належить анімація. Якщо в якості значення буде число, то властивість стилю буде перенесено з поточного стану до цього нового числа. В іншому випадку, якщо рядок «hide», «show», або «toggle» передбачена, то за замовчуванням анімація буде побудована для цього властивості.
- params (Hash): Набір атрибутів стилю, які ви хочете анімувати.
- speed (String | Number): (необов'язково) Рядок, що представляє один з трьох встановлених швидкостей ( «slow», «normal», або «fast») або кількість мілісекунд для запуску анімації (наприклад, 1000).
- easing (String): (необов'язково) Ім'я ефекту, який ви хочете використовувати (необхідний модуль ефекту).
- callback (Функція): (необов'язково) Функція, яка буде виконана, коли анімація завершена.
Приклад використання функції 'easing' для отримання іншого стилю анімації. Це буде працювати тільки якщо у вас є плагін, який забезпечує цю функцію 'easing' (тільки функція 'linear' надається за замовчуванням з Jquery).
Таким чином, ви можете використовувати JQuery, щоб створити гарне враження UI на своїй веб-сторінці. Крім того, дайте мені знати, якщо ви використовуєте свої власні вбудовані плагіни для досягнення інших ефектів UI.
На цьому все! До побачення і до зустрічі!