Как в 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.
Получилась вот такая вот статейка. Просьба: кому не понятно или что-то не ясно — оставляйте комментарии, а кому понравилось — подписывайтесь на новые статьи блога!
На этом все! До свидания и до скорых встреч!