Latest web development tutorials

jQuery UI przykład - Hide (Ukryj)

Użyj efektów niestandardowych ukryć dopasowania elementów.

Aby uzyskać więcej informacji na temat .hide() Szczegóły dotyczące metod można znaleźć w dokumentacji API .hide () .

.hide () Demo

Kliknij przycisk, aby wyświetlić podgląd efektów. 

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI Effects - .hide () Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .toggler {width: 500px; height: 200px;}
  #button {padding: .5em 1em; text-decoration: none;}
  #effect {width: 240 piks; height: 135px; padding: 0.4em; position: relative;}
  #effect h3 {margin: 0; padding: 0.4em; text-align: center;}
  </ Style>
  <Script>
  $ (Function () {
    // Uruchom aktualnie wybrany runEffect Funkcja Efekt () {
      // Wyprowadź efektów typu var selectedEffect = $ ( "#effectTypes") .val ();
 
      // Większość działań nie trzeba wpisywać opcje domyślne opcje wysyłki var = {};
      // Niektóre efekty specjalne z wymaganymi parametrami if (selectedEffect === "skala") {
        options = {procent: 0};
      } Else if (selectedEffect === "rozmiar") {
        options = {z: {width: 200, wysokość: 60}};
      }
 
      // Run efekty $ ( "#effect") .hide (selectedEffect, opcje, 1000, callback);
    };
 
    // Funkcja oddzwaniania Callback () {
      setTimeout (function () {
        $ ( "#effect") .removeAttr ( "Style") .hide () fadeIn () .;
      }, 1000);
    };
 
    // Ustaw wartość w zależności od wybranych efektów menu $ ( "#button") .Kliknij (function () {
      runEffect ();
      return false;
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "wahacz">
  <Div id = "efekt" class = "widget-ui ui-content-corner-all">
    <H3 class = "widget-ui ui-header-corner-all"> Hide (Ukryj) </ h3>
    <P>
      Etiam libero neque, luctus a, eleifend, gdzie indziej niesklasyfikowane, sempre się, lorem. Sed pede. Nulla ipsum Metusa, adipiscing UT, luctus sed vitae, hendrerit, MI.
    </ P>
  </ Div>
</ Div>
 
<select name = "efekty" id = ""> effectTypes
  <Option value = "ślepe"> Shades efekty (Blind skutku) </ option>
  <Wartość Option = "bounce"> odbicia efekty (Bounce skutku) </ option>
  <Wartość Option = "klip"> Efekty zacisk (klips Effect) </ option>
  <Wartość Option = "drop"> Efekty Landing (spadek Effect) </ option>
  <Option value = "wybuchnąć"> Efekty wybuchowości (Explode Effect) </ option>
  <Wartość Option = "spasować"> składane efekty (Fold Effect) </ option>
  <Option value = "highlight"> Efekty podświetlenia (Highlight Effect) </ option>
  <Wartość Option = "puff"> efekty rozszerzalności cieplnej (Puff skutku) </ option>
  <Wartość Option = "pulsuje"> pokonać efekty (pulsować skutku) </ option>
  <Wartość Option = "skala"> efekty powiększenia (skala efektu) </ option>
  <Wartość Option = "wstrząsnąć"> efekty wibracji (drgań efektu) </ option>
  <Wartość Option = "size"> Efekty Size (wielkość efektu) </ option>
  <Wartość Option = "slide"> Efekty ślizgowe (zjeżdżalnia Effect) </ option>
</ Select>
 
<a href="#" id="button" class="ui-state-default ui-corner-all"> prowadzone efekty </a>
 
 
</ Body>
</ Html>