Как в HTML применить эффекты, используя JQuery

Приветствую вас на своем блоге!

Сегодня я вам расскажу как добавить различных эффектов на страницу 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» предусмотрена, то по умолчанию анимация будет построена для этого свойства.

  • params (Hash): Набор атрибутов стиля, которые вы хотите анимировать.
  • speed (String | Number): (необязательно) Строка, представляющая один из трех предустановленных скоростей («slow», «normal», или «fast») или количество миллисекунд для запуска анимации (например, 1000).
  • easing (String): (необязательно) Имя эффекта, который вы хотите использовать (необходим модуль эффекта).
  • callback (Функция): (необязательно) Функция, которая будет выполнена, когда анимация завершена.
$("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.

Получилась вот такая вот статейка. Просьба: кому не понятно или что-то не ясно — оставляйте комментарии, а кому понравилось — подписывайтесь на новые статьи блога!

На этом все! До свидания и до скорых встреч!

Вам понравилась статья?
плохохорошо (+2 баллов, 1 оценок)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на ВордПресс более 5 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на вордресс, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!