jQuery - Эффекты

jQuery предоставляет тривиально простой интерфейс для создания разнообразных потрясающих эффектов. Методы jQuery позволяют быстро применять часто используемые эффекты с минимальной конфигурацией. В этом руководстве рассматриваются все важные методы jQuery для создания визуальных эффектов.

Отображение и скрытие элементов

Команды для отображения и скрытия элементов в значительной степени соответствуют нашим ожиданиям - show() чтобы показать элементы в обернутом наборе и hide() чтобы скрыть их.

Синтаксис

Вот простой синтаксис для show() метод -

[selector].show( speed, [callback] );

Вот описание всех параметров -

speed - Строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).
callback- Этот необязательный параметр представляет функцию, которая будет выполняться всякий раз, когда анимация завершается; выполняется один раз для каждого анимированного элемента.

Ниже приводится простой синтаксис для hide() метод -

[selector].hide( speed, [callback] );

Вот описание всех параметров -

speed - Строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).
callback- Этот необязательный параметр представляет функцию, которая будет выполняться всякий раз, когда анимация завершается; выполняется один раз для каждого анимированного элемента.

пример

Рассмотрим следующий HTML-файл с небольшой кодировкой JQuery -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {

            $("#show").click(function () {
               $(".mydiv").show( 1000 );
            });

            $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
				
         });
      </script>
		
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:100px;
         }
      </style>
   </head>
	
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hide" type = "button" value = "Hide" />   
      <input id = "show" type = "button" value = "Show" />
   </body>
</html>

Это даст следующий результат -

Переключение элементов

jQuery предоставляет методы для переключения состояния отображения элементов между открытыми и скрытыми. Если элемент изначально отображается, он будет скрыт; если он скрыт, он будет показан.

Синтаксис

Вот простой синтаксис для одного из toggle() методы -

[selector]..toggle([speed][, callback]);

Вот описание всех параметров -

speed - Строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).
callback- Этот необязательный параметр представляет функцию, которая будет выполняться всякий раз, когда анимация завершается; выполняется один раз для каждого анимированного элемента.

пример

Мы можем анимировать любой элемент, например простой <div>, содержащий изображение -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){
               $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
		
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
	
   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery" />
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

Это даст следующий результат -

Методы JQuery Effect

Вы ознакомились с базовой концепцией jQuery Effects. В следующей таблице перечислены все важные методы для создания различных эффектов.

Sr. No.	Методы и описание
1	animate (params, [продолжительность, замедление, обратный вызов]) Функция для создания пользовательских анимаций.
2	fadeIn (скорость, [обратный вызов]) Исчезните все совпадающие элементы, настроив их непрозрачность и запустив дополнительный обратный вызов после завершения.
3	fadeOut (скорость, [обратный вызов]) Уберите все совпадающие элементы, установив их непрозрачность на 0, затем установив display на «none» и запустив дополнительный обратный вызов после завершения.
4	fadeTo (скорость, непрозрачность, обратный вызов) Уменьшите непрозрачность всех согласованных элементов до указанной непрозрачности и активируйте дополнительный обратный вызов после завершения.
5	скрывать( ) Скрывает каждый из набора совпадающих элементов, если они отображаются.
6	скрыть (скорость, [обратный вызов]) Скройте все совпадающие элементы, используя изящную анимацию и запустив дополнительный обратный вызов после завершения.
7	Показать( ) Отображает каждый из набора совпадающих элементов, если они скрыты.
8	показать (скорость, [обратный вызов]) Показать все совпадающие элементы с помощью изящной анимации и срабатывания дополнительного обратного вызова после завершения.
9	slideDown (скорость, [обратный вызов]) Выявите все совпадающие элементы, отрегулировав их высоту и запустив дополнительный обратный вызов после завершения.
10	slideToggle (скорость, [обратный вызов]) Переключите видимость всех совпадающих элементов, отрегулировав их высоту и запустив дополнительный обратный вызов после завершения.
11	slideUp (скорость, [обратный вызов]) Скройте все совпадающие элементы, отрегулировав их высоту и запустив дополнительный обратный вызов после завершения.
12	стоп ([clearQueue, gotoEnd]) Останавливает все текущие анимации для всех указанных элементов.
13	переключить () Переключить отображение каждого набора совпадающих элементов.
14	переключить (скорость, [обратный вызов]) Переключить отображение каждого набора совпадающих элементов с помощью изящной анимации и срабатывания дополнительного обратного вызова после завершения.
15	Переключить переключатель ) Переключить отображение каждого из набора совпадающих элементов на основе переключателя (true показывает все элементы, false скрывает все элементы).
16	jQuery.fx.off Глобально отключить все анимации.

Эффекты на основе библиотеки пользовательского интерфейса

Чтобы использовать эти эффекты, вы можете загрузить последнюю версию библиотеки пользовательского интерфейса jQuery. jquery-ui-1.11.4.custom.zipиз библиотеки пользовательского интерфейса jQuery или используйте Google CDN, чтобы использовать его так же, как мы это сделали для jQuery.

Мы использовали Google CDN для пользовательского интерфейса jQuery, используя следующий фрагмент кода на странице HTML, поэтому мы можем использовать пользовательский интерфейс jQuery:

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>

Sr. No.	Методы и описание
1	Слепой Ослепляет элемент или показывает его, закрывая его.
2	Отказов Отражает элемент n раз по вертикали или горизонтали.
3	Клип Обрезает элемент или снимает его по вертикали или горизонтали.
4	Падение Отбрасывает элемент или показывает его, отбрасывая.
5	Взорваться Разрывает элемент на несколько частей.
6	Сложить Складывает элемент как лист бумаги.
7	Выделить Выделяет фон заданным цветом.
8	Слойка Анимации масштабирования и исчезновения создают эффект затяжки.
9	Пульсировать Несколько раз изменяет непрозрачность элемента.
10	Шкала Уменьшите или увеличьте элемент в процентном соотношении.
11	Встряхнуть Встряхните элемент по вертикали или горизонтали n раз.
12	Размер Измените размер элемента до указанной ширины и высоты.
13	Горка Выдвигает элемент из области просмотра.
14	Перечислить Переносит очертание одного элемента на другой.