Учебники

JqueryUI — Эффект

Январь 2, 2019

В этой главе будет обсуждаться метод effect () , который является одним из методов, используемых для управления визуальными эффектами jQueryUI. Метод effect () применяет эффект анимации к элементам без необходимости показывать или скрывать его.

Синтаксис

Метод effect () имеет следующий синтаксис — 

.effect( effect [, options ] [, duration ] [, complete ] )
Sr.No. Параметр и описание
1

эффект

Это строка, указывающая, какой эффект использовать для перехода.

2

опции

Это тип объекта и указывает специфичные для эффекта настройки и ослабление . Кроме того, каждый эффект имеет свой собственный набор опций, которые можно указать общие для нескольких эффектов, описанных в таблице jQueryUI Effects .

3

продолжительность

Он имеет тип Number или String и указывает количество миллисекунд эффекта. Его значение по умолчанию составляет 400 .

4

полный

Это метод обратного вызова, вызываемый для каждого элемента, когда эффект завершен для этого элемента.

эффект

Это строка, указывающая, какой эффект использовать для перехода.

опции

Это тип объекта и указывает специфичные для эффекта настройки и ослабление . Кроме того, каждый эффект имеет свой собственный набор опций, которые можно указать общие для нескольких эффектов, описанных в таблице jQueryUI Effects .

продолжительность

Он имеет тип Number или String и указывает количество миллисекунд эффекта. Его значение по умолчанию составляет 400 .

полный

Это метод обратного вызова, вызываемый для каждого элемента, когда эффект завершен для этого элемента.

jQueryUI Эффекты

В следующей таблице описаны различные эффекты, которые можно использовать с помощью метода effect ().

Sr.No. Эффект и описание
1

слепой

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

2

подпрыгивать

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

3

клип

Показывает или скрывает элемент, перемещая противоположные границы элемента вместе, пока они не встретятся в середине или наоборот.

4

падение

Показывает или скрывает элемент, создавая видимость его перетаскивания на страницу.

5

взрываться

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

6

увядать

Показывает или скрывает элемент, регулируя его непрозрачность. Это то же самое, что и основные эффекты затухания, но без параметров.

7

складка

Показывает или скрывает элемент, корректируя противоположные границы внутри или снаружи, а затем делая то же самое для другого набора границ.

8

основной момент

Привлекает внимание к элементу путем кратковременного изменения его цвета фона при отображении или скрытии элемента.

9

пыхтеть

Расширяет или сжимает элемент на месте, изменяя его непрозрачность.

10

пульсировать

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

11

масштаб

Расширяет или сужает элемент на указанный процент.

12

встряхивать

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

13

размер

Изменяет размеры элемента до указанной ширины и высоты. Аналогично масштабу, за исключением того, как указан целевой размер.

14

горка

Перемещает элемент таким образом, чтобы он скользил по странице или из нее.

15

перечислить

Анимирует переходный элемент структуры, который заставляет элемент казаться для передачи другому элементу. Внешний вид элемента структуры должен быть определен с помощью правил CSS для класса ui-Effects-Transfer или класса, указанного в качестве опции.

слепой

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

подпрыгивать

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

клип

Показывает или скрывает элемент, перемещая противоположные границы элемента вместе, пока они не встретятся в середине или наоборот.

падение

Показывает или скрывает элемент, создавая видимость его перетаскивания на страницу.

взрываться

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

увядать

Показывает или скрывает элемент, регулируя его непрозрачность. Это то же самое, что и основные эффекты затухания, но без параметров.

складка

Показывает или скрывает элемент, корректируя противоположные границы внутри или снаружи, а затем делая то же самое для другого набора границ.

основной момент

Привлекает внимание к элементу путем кратковременного изменения его цвета фона при отображении или скрытии элемента.

пыхтеть

Расширяет или сжимает элемент на месте, изменяя его непрозрачность.

пульсировать

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

масштаб

Расширяет или сужает элемент на указанный процент.

встряхивать

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

размер

Изменяет размеры элемента до указанной ширины и высоты. Аналогично масштабу, за исключением того, как указан целевой размер.

горка

Перемещает элемент таким образом, чтобы он скользил по странице или из нее.

перечислить

Анимирует переходный элемент структуры, который заставляет элемент казаться для передачи другому элементу. Внешний вид элемента структуры должен быть определен с помощью правил CSS для класса ui-Effects-Transfer или класса, указанного в качестве опции.

Примеры

В следующих примерах демонстрируется использование метода effect () с различным эффектом, перечисленным в приведенной выше таблице.

Эффект — встряхнуть 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI effect Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         #box-1 {
            height: 100px;
            width: 100px;
            background: #b9cd6d;
         }
      </style>
      
      <script>
         $(document).ready(function() {
            $('#box-1').click(function() {
               $( "#box-1" ).effect( "shake", {
                  times: 10,
                  distance: 100
               }, 3000, function() {
                  $( this ).css( "background", "#cccccc" );
               });
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "box-1">Click On Me</div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле effectexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Эффект — взорваться 

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
            background: #b9cd6d;
         }
      </style>
      
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "explode",
                  easing: "easeInExpo",
                  pieces: 4,
                  duration: 5000
               });
            });
         });
      </script>
   </head>
   
   <body>
      <div id="box-2"></div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле effectexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

49
Share: