JqueryUI - Эффект

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

Синтаксис

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

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

effect

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

2

options

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

3

duration

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

4

complete

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

jQueryUI эффекты

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

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

blind

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

2

bounce

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

3

clip

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

4

drop

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

5

explode

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

6

fade

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

7

fold

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

8

highlight

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

9

puff

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

10

pulsate

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

11

scale

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

12

shake

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

13

size

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

14

slide

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

15

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, вы также должны увидеть следующий вывод. Теперь вы можете поиграть с результатом -