Приветствую вас на своем блоге!
Сегодня я вам расскажу как добавить различных эффектов на страницу HTML с помощью JQuery.
JQuery это небольшая и прекрасная библиотека JavaScript, которую я очень часто использую в своей работе. В этом посте я расскажу вам как можно сделать эффект fade in/fade out с помощью этой самой библиотеки JQuery. Давайте рассмотрим все приемы, которые мы можем сделать, чтобы манипулировать HTML с помощью JQuery.
Hide/Show и Toggle HTML компонент Div/Span с помощью JQuery
На сегодняшний день на большинство веб-страницах есть разделы, которые можно скрыть / показать (hide / show), а говоря простым языком спойлер (spoiler), щелкнув на значок этого раздела. Кроме этого, вы еще можете захотеть повесить спойлер на какой-то конкретный компонент HTML, как кнопка, текстовое поле или div/span. Это легко может быть сделано с помощью JQuery.
Предположим, у нас есть текстовое поле и кнопка, и нам нужно, чтобы при нажатии на кнопку открывалось текстовое поле. Ниже приведён фрагмент кода, чтобы сделать это.
<input type=»text» name=»username» id=»user»/> <input type=»button» onClick=»$(‘#user’).hide()» value=»Hide Textbox»/>
В приведенном фрагменте кода мы выбираем текстовое поле, используя его идентификатор #user и затем вызываем функцию hide(), чтобы скрыть его. Совсем просто, не так ли?
Кроме того, чтобы показать какой компонент мы собираемся использовать, нужно добавить следующий код:
$(«#someid»).show();
Кроме того, вы можете не только скрыть/показать любой HTML компонент, а также вы можете указать скорость и функцию обратного вызова, которая вызывается после того, как содержимое скрыто или показано как на коде ниже.
Ниже показан синтаксис методов hide() и show() со скоростью:
// Пример hide(speed) и show(speed): $(«input»).hide(«slow»); $(«p»).show(«normal»);
Скорость может быть «slow», что означает медленно, «normal» — нормально и «fast» — как вы уже догадались это быстро. Также можно указать число, в качестве аргумента, который представляется в миллисекундах, например: 2000, как и показано ниже:
$(«.someclass»).hide(2000);
Также вы можете задать функцию-обработчик, который вызывается после того, как анимация завершена.
$(«#id»).show(«slow», function() { alert(«done»); });
Кроме того, вы можете реализовать функцию переключения, где при нажатии кнопки можно вызвать переключатель эффекта на теге Div или Table.
<table id=»tableId»> <tr><td> This is demo </td></tr> </table> <input type=»button» value=»Toggle Table» onclick=»$(‘#tableId’).toggle();» />
SlideUp/SlideDown с помощью JQuery
Это простой эффект, который показывает как скользит контейнер — вниз или вверх. Просто вам нужно вызвать функции slideUp() и slideDown().
$(«#divId»).slideUp(); $(«table»).slideDown(«slow»); $(«div»).slideUp(1000);
SlideUp/SlideDown подобно функциям hide()/show(), также могут использоваться различные аргументы, чтобы регулировать скорость скольжения, а также может быть вызвана функция обратного вызова.
$(«span»).slideDown(«slow», function() { alert(«Slide Done»); });
Также вы можете использовать функцию SlideToggle() для достижения функциональных возможностей переключения скольжения вверх и вниз. SlideToggle() также поставляется с теми же аргументами что и SlideDown/SlideUp.
$(«div#specialDiv»).slideToggle(«fast»);
Анимация HTML компонентов с использованием JQuery
JQuery предоставляет функцию animate(), с помощью которой можно создавать свои собственные анимации. Ниже приведен синтаксис этой функции:
animate(params, speed, easing, callback);
Ключевым аспектом этой функции является объект свойств стиля, которые будут анимированы. Каждый ключ в рамках объекта представляет собой свойство стиля, также будет анимировано (например: «height», «top», или «opacity»).
Значение, связанное с ключом представляет собой свойство, к которому принадлежит анимация. Если в качестве значения будет число, то свойство стиля будет перенесено из текущего состояния к этому новому числу. В противном случае, если строка «hide», «show», или «toggle» предусмотрена, то по умолчанию анимация будет построена для этого свойства.
$(«p»).animate({ height: ‘toggle’, opacity: ‘toggle’ }, «slow»); $(«p»).animate({ left: 50, opacity: ‘show’ }, 500);
Пример использования функции ‘easing’ для получения иного стиля анимации. Это будет работать только если у вас есть плагин, который обеспечивает эту функцию ‘easing’ (только функция ‘linear’ предоставляется по умолчанию с Jquery).
$(«p»).animate({ opacity: ‘show’ }, «slow», «easein»);
Таким образом, вы можете использовать JQuery, чтобы создать хорошее впечатление UI на своей веб-странице. Кроме того, дайте мне знать, если вы используете свои собственные встроенные плагины для достижения других эффектов UI.
Получилась вот такая вот статейка. Просьба: кому не понятно или что-то не ясно — оставляйте комментарии, а кому понравилось — подписывайтесь на новые статьи блога!
На этом все! До свидания и до скорых встреч!
