Учебники

jQuery — Эффекты

Ноябрь 20, 2018

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

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

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

Синтаксис

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

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

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

  • скорость — строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).

  • callback — этот необязательный параметр представляет функцию, которая должна выполняться при завершении анимации; выполняется один раз для каждого элемента, анимированного против.

скорость — строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).

callback — этот необязательный параметр представляет функцию, которая должна выполняться при завершении анимации; выполняется один раз для каждого элемента, анимированного против.

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

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

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

  • скорость — строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).

  • callback — этот необязательный параметр представляет функцию, которая должна выполняться при завершении анимации; выполняется один раз для каждого элемента, анимированного против.

скорость — строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).

callback — этот необязательный параметр представляет функцию, которая должна выполняться при завершении анимации; выполняется один раз для каждого элемента, анимированного против.

пример

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

Live Demo 

<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]);

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

  • скорость — строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).

  • callback — этот необязательный параметр представляет функцию, которая должна выполняться при завершении анимации; выполняется один раз для каждого элемента, анимированного против.

скорость — строка, представляющая одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).

callback — этот необязательный параметр представляет функцию, которая должна выполняться при завершении анимации; выполняется один раз для каждого элемента, анимированного против.

пример

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

Live Demo 

<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-эффекта

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

Sr.No. Методы и описание
1 одушевленный (params, [длительность, ослабление, обратный вызов])

Функция для создания пользовательских анимаций.

2 fadeIn (скорость, [обратный вызов])

Украсьте все подходящие элементы, отрегулировав их непрозрачность и сделав необязательный обратный вызов после завершения.

3 fadeOut (скорость, [обратный вызов])

Исчезните все подходящие элементы, установив их непрозрачность на 0, затем установив отображение на «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

Глобально отключите все анимации.

Функция для создания пользовательских анимаций.

Украсьте все подходящие элементы, отрегулировав их непрозрачность и сделав необязательный обратный вызов после завершения.

Исчезните все подходящие элементы, установив их непрозрачность на 0, затем установив отображение на «none» и запустив дополнительный обратный вызов после завершения.

Уменьшение непрозрачности всех соответствующих элементов до указанной непрозрачности и запуск необязательного обратного вызова после завершения.

Скрывает каждый набор подходящих элементов, если они показаны.

Скройте все соответствующие элементы, используя изящную анимацию и вызывая дополнительный обратный вызов после завершения.

Отображает каждый набор подходящих элементов, если они скрыты.

Показать все соответствующие элементы, используя изящную анимацию и запустив необязательный обратный вызов после завершения.

Выявите все подходящие элементы, отрегулировав их высоту и сделав дополнительный обратный вызов после завершения.

Переключите видимость всех соответствующих элементов, отрегулировав их высоту и запустив дополнительный обратный вызов после завершения.

Скрыть все совпадающие элементы, регулируя их высоту и вызывая дополнительный обратный вызов после завершения.

Останавливает все запущенные анимации на всех указанных элементах.

Переключить отображение каждого набора подходящих элементов.

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

Переключить отображение каждого набора подходящих элементов на основе переключателя (true показывает все элементы, false скрывает все элементы).

Глобально отключите все анимации.

Пользовательский интерфейс на основе эффектов

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

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

Ослепляет элемент или показывает его, ослепляя.

Отскакивает элемент по вертикали или горизонтали n раз.

Зажимает или выключает элемент, вертикально или горизонтально.

Отбрасывает элемент или показывает его, вставляя.

Взрывает элемент на несколько частей.

Складывает элемент, как лист бумаги.

Выделяет фон заданным цветом.

Анимация масштабирования и затухания создает эффект затяжки.

Пульсирует непрозрачность элемента несколько раз.

Уменьшить или увеличить элемент в процентном соотношении.

Встряхивает элемент вертикально или горизонтально n раз.

Изменить размер элемента до указанной ширины и высоты.

Выдвигает элемент из области просмотра.

Переносит контур элемента на другой.

46
Share: