JqueryUI - efekt

W tym rozdziale omówimy effect()metoda, która jest jedną z metod zarządzania efektami wizualnymi jQueryUI. effect () stosuje efekt animacji do elementów bez konieczności jego pokazywania lub ukrywania.

Składnia

Plik effect() metoda ma następującą składnię -

.effect( effect [, options ] [, duration ] [, complete ] )

Sr.No.	Parametr i opis
1	effect To jest ciąg znaków wskazujący, którego efektu użyć do przejścia.
2	options Jest to typ Object i wskazuje ustawienia i wygładzanie specyficzne dla efektu . Ponadto każdy efekt ma własny zestaw opcji, które można określić jako wspólne dla wielu efektów opisanych w tabeli Efekty jQueryUI .
3	duration Jest to typ Number lub String i wskazuje liczbę milisekund efektu. Jego domyślna wartość to 400 .
4	complete Jest to metoda wywołania zwrotnego wywoływana dla każdego elementu, gdy efekt jest kompletny dla tego elementu.

Efekty jQueryUI

W poniższej tabeli opisano różne efekty, których można używać z metodą effects () -

Sr.No.	Efekt i opis
1	blind Pokazuje lub ukrywa element na wzór rolety okiennej: przesuwając dolną krawędź w dół lub w górę lub prawą krawędź w prawo lub w lewo, w zależności od określonego kierunku i trybu .
2	bounce Powoduje, że element wydaje się odbijać w kierunku pionowym lub poziomym, opcjonalnie pokazując lub ukrywając element.
3	clip Pokazuje lub ukrywa element, przesuwając przeciwległe krawędzie elementu razem, aż spotkają się w środku lub odwrotnie.
4	drop Pokazuje lub ukrywa element, sprawiając, że wygląda na to, że spada na stronę lub spada ze strony.
5	explode Pokazuje lub ukrywa element, dzieląc go na wiele części poruszających się w kierunkach promieniowych, tak jakby implodował na stronę lub eksplodował z niej.
6	fade Pokazuje lub ukrywa element, dostosowując jego krycie. To jest to samo, co podstawowe efekty zanikania, ale bez opcji.
7	fold Pokazuje lub ukrywa element, dopasowując przeciwległe krawędzie do wewnątrz lub na zewnątrz, a następnie robiąc to samo dla innego zestawu granic.
8	highlight Zwraca uwagę na element, chwilowo zmieniając kolor tła podczas pokazywania lub ukrywania elementu.
9	puff Rozwija lub kurczy element w miejscu podczas dostosowywania jego krycia.
10	pulsate Dostosowuje krycie elementu, aby włączyć i wyłączyć przed upewnieniem się, że element jest wyświetlany lub ukrywany zgodnie z ustaleniami.
11	scale Zwiększa lub zmniejsza element o określony procent.
12	shake Potrząsa elementem w przód iw tył, w pionie lub w poziomie.
13	size Zmienia rozmiar elementu do określonej szerokości i wysokości. Podobny do skali, z wyjątkiem sposobu określenia rozmiaru docelowego.
14	slide Przenosi element tak, że wydaje się, że przesuwa się on na stronę lub poza nią.
15	transfer Animuje przejściowy element konturu, który sprawia, że element wydaje się przenoszony do innego elementu. Wygląd elementu konturu należy zdefiniować za pomocą reguł CSS dla klasy ui-effects-transfer lub klasy określonej jako opcja.

Przykłady

Poniższe przykłady demonstrują użycie metody effect () z innym skutkiem wymienionym w powyższej tabeli.

Efekt - wstrząsnąć

<!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>

Zapiszmy powyższy kod w pliku HTML effectexample.htmi otwórz go w standardowej przeglądarce obsługującej javascript, powinieneś zobaczyć następujące dane wyjściowe. Teraz możesz grać z wynikiem -

Efekt - eksploduj

<!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>

Zapiszmy powyższy kod w pliku HTML effectexample.htmi otwórz go w standardowej przeglądarce obsługującej javascript, musisz również zobaczyć następujące dane wyjściowe. Teraz możesz grać z wynikiem -