Как применять эффекты пользовательского интерфейса HTML с помощью jQuery

jQuery — это небольшая и замечательная библиотека JavaScript, которую я широко использую в своей работе. Я подумал написать учебник о достижении эффектов пользовательского интерфейса через jQuery. В этом посте я объяснил, как сделать эффект затухания / затухания с помощью jQuery. На этот раз давайте рассмотрим все приемы, которые мы можем сделать, чтобы манипулировать HTML с помощью jQuery.

Эффект Fade In / Fade Out с использованием jQuery

Обратитесь к этому сообщению, чтобы узнать больше об эффекте Fade In / Fade Out в jQuery.

Скрыть / Показать и Переключить компонент HTML / DIV / SPAN с помощью jQuery

Сегодня большинство веб-страниц имеют разделы со значком скрытия / показа, которые переключают видимость этого раздела. Также иногда вы можете захотеть скрыть / показать определенный 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(speed) and show(speed)
E.g.:
$("input").hide("slow");

$("p").show("normal");

Ниже приведен синтаксис методов hide () и show () со скоростью:

$(“.someclass”).hide(2000);

Скорость может быть «медленной», «нормальной» и «быстрой». Вы также можете указать число в качестве аргумента, представляющего миллисекунды.

$("#id").show("slow", function() {
      alert("done");
});

Также вы можете указать функцию-обработчик, которая будет вызываться после завершения анимации.

Также вы можете захотеть реализовать функцию переключения, при которой событие нажатия кнопки может вызвать эффект переключения на некотором элементе div или таблице.

<table id="tableId">
<tr><td> This is demo </td></tr>
</table>

<input type="button" value="Toggle Table" onClick="$("#tableId").toggle();" />

Слайд вверх / вниз с помощью jQuery

Это простой эффект, который скользит вниз или вверх контейнера. Просто вам нужно вызвать функции slideUp () или slideDown ().

$("#divId").slideUp();
$("table").slideDown("slow");
$("div").slideUp(1000);

Аналогично hide () / show () slideDown () / slideUp () также можно вызывать с аргументами для настройки скорости скольжения и, при желании, можно вызывать функцию обратного вызова.

$("span").slideDown("slow", function() {
      alert("Slide Done");
});

Также вы можете использовать функцию slideToggle () для переключения между функциями, чтобы скользить вверх и вниз. slideToggle () также имеет те же аргументы, что и slideDown / slideUp.

$("div#specialDiv").slideToggle("fast");

Анимировать HTML-компонент с помощью jQuery

jQuery предоставляет функцию animate (), которую можно использовать для создания собственных пользовательских анимаций.

animate(params, speed, easing, callback);

Ключевым аспектом этой функции является объект свойств стиля, который будет анимирован, и с какой целью. Каждый ключ в объекте представляет свойство стиля, которое также будет анимированным (например: «высота», «верх» или «непрозрачность»).

Значение, связанное с ключом, указывает, с какой целью свойство будет анимировано. Если в качестве значения указано число, свойство стиля будет переведено из его текущего состояния в этот новый номер. В противном случае, если указана строка «hide», «show» или «toggle», для этого свойства будет создана анимация по умолчанию.

params (Hash): набор атрибутов стиля, которые вы хотите анимировать, и для чего.
speed (String | Number): (необязательно) Строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).
easing (String): (необязательно) Имя эффекта замедления, который вы хотите использовать (требуется подключаемый модуль).
callback (Function): (необязательно) Функция, которая должна выполняться при завершении анимации.

$("p").animate({
  height: 'toggle', opacity: 'toggle'
}, "slow");

$("p").animate({
  left: 50, opacity: 'show'
}, 500);

Пример использования функции замедления для предоставления другого стиля анимации. Это будет работать только в том случае, если у вас есть плагин, который обеспечивает эту функцию замедления (по умолчанию предоставляется только ‘linear’, с jQuery).

$("p").animate({
  opacity: 'show'
}, "slow", "easein");

Таким образом, вы можете использовать jQuery для создания хорошего пользовательского интерфейса на своей веб-странице. Также дайте мне знать, если вы используете свои собственные собственные плагины для достижения большего количества эффектов пользовательского интерфейса.