Учебники

JqueryUI — Скрыть

Январь 2, 2019

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

Синтаксис

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

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

эффект

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

2

опции

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

3

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

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

4

полный

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

эффект

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

опции

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

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

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

полный

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

jQueryUI Эффекты

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

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

слепой

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

2

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

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

3

клип

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

4

падение

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

5

взрываться

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

6

увядать

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

7

складка

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

8

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

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

9

пыхтеть

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

10

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

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

11

масштаб

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

12

встряхивать

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

14

размер

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

15

горка

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

16

перечислить

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

слепой

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

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

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

клип

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

падение

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

взрываться

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

увядать

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

складка

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

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

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

пыхтеть

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

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

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

масштаб

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

встряхивать

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

размер

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

горка

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

перечислить

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

Примеры

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

Эффект — слепой

В следующем примере показано использование метода hide () со слепым эффектом. Нажмите кнопку « Скрыть эффект слепоты», чтобы увидеть эффект слепоты до того, как элемент скрывается. 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI hide 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>
         .toggler { width: 500px; height: 200px; }
            #button { padding: .5em 1em; text-decoration: none; }
            #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
            #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
      </style>
      
      <script>
         $(function() {
            function runEffect() {
               $( "#effect" ).hide( "blind", {times: 10, distance: 100}, 1000, callback );
            };
            // callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect" ).removeAttr( "style" ).hide().fadeIn();
               }, 1000 );
            };
            
            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "toggler">
         <div id = "effect" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Hide</h3>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
            </p>
         </div>
      </div>
      <a href = "#" id = "button" class = "ui-state-default ui-corner-all">Blind Effect Hide</a>
   </body>
</html>

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

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

В следующем примере показано использование метода shake () со слепым эффектом. Нажмите кнопку « Скрыть эффект встряхивания», чтобы увидеть эффект встряхивания до того, как элемент будет скрыт. 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI hide 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>
         .toggler-1 { width: 500px; height: 200px; }
            #button-1 { padding: .5em 1em; text-decoration: none; }
            #effect-1 { width: 240px; height: 135px; padding: 0.4em; position: relative; }
            #effect-1 h3 { margin: 0; padding: 0.4em; text-align: center; }
      </style>
      
      <script>
         $(function() {
            function runEffect() {
               $( "#effect-1" ).hide( "shake", {times: 10, distance: 100}, 1000, callback );
            };
            
            // callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect-1" ).removeAttr( "style" ).hide().fadeIn();
               }, 1000 );
            };
            
            // set effect from select menu value
            $( "#button-1" ).click(function() {
               runEffect();
               return false;
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "toggler-1">
         <div id = "effect-1" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Hide</h3>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
            </p>
         </div>
      </div>
      <a href = "#" id = "button-1" class = "ui-state-default ui-corner-all">Shake Effect Hide</a>
   </body>
</html>

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

48
Share: