Latest web development tutorials

jQuery UI par exemple - Hide (Masquer)

Utilisez des effets personnalisés pour cacher les éléments correspondant.

Pour plus d' informations sur .hide() des détails sur les méthodes, consultez la documentation de l' API .hide () .

.hide () Demo

Cliquez sur le bouton pour obtenir un aperçu des effets. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> 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: 240px; height: 135px; padding: 0.4em; position: relative;}
  h3 #effect {margin: 0; padding: 0.4em; text-align: center;}
  </ Style>
  <Script>
  $ (Function () {
    // Exécuter actuellement sélectionné runEffect fonction de l'effet () {
      // Dérivez effets de type var selectedEffect = $ ( "#effectTypes") .val ();
 
      // La plupart des effets ne ont pas besoin de taper les options options de livraison par défaut var = {};
      // Certains effets spéciaux avec les paramètres requis si (selectedEffect === "échelle") {
        options = {pour cent: 0};
      } Else if (selectedEffect === "taille") {
        options = {à: {width: 200, hauteur: 60}};
      }
 
      // effets Run $ ( "#effect") .hide (selectedEffect, options, 1000, rappel);
    };
 
    // Fonction de rappel callback () {
      setTimeout (function () {
        $ ( "#effect") .removeAttr ( "Style") .hide () fadeIn () .;
      }, 1000);
    };
 
    // Définir la valeur en fonction des effets de menu sélectionnés $ ( «#button») .cliquez (function () {
      runEffect ();
      return false;
    });
  });
  </ Script>
</ Head>
<Body>
 
<Class Div = "de toggler">
  <Div id = "effet" class = "ui-widget-content ui-coin-all">
    <Classe H3 = "ui-widget-tête ui-coin-all"> Hide (Masquer) </ h3>
    <P>
      Etiam libero neque, luctus a, eleifend nec, semper à, lorem. Sed pede. Nulla lorem metus, ut adipiscing, luctus sed, hendrerit vitae, mi.
    </ P>
  </ Div>
</ Div>
 
<select name = "effets" id = "effectTypes">
  <Option value = "aveugles"> Shades effets (aveugles Effect) </ option>
  <Option value = "rebond"> effets (Bounce effet) rebond </ option>
  <Option value = "clip"> Effets clip (Effet Clip) </ option>
  <Option value = "drop"> effets d'atterrissage (Effet goutte) </ option>
  effets d'explosion <valeur d'option = "exploser"> (Explode Effect) </ option>
  <Option value = "fold"> effets de pliage (Pliez Effect) </ option>
  effets de surbrillance <valeur Option = "highlight"> (Mettre Effect) </ option>
  <Option value = "bouffée"> effets de dilatation (Puff Effect) </ option>
  <Option value = "pulser"> effets (Pulsate Effect) battre </ option>
  <Option value = "échelle"> effets de zoom (échelle Effect) </ option>
  <Option value = "secouer"> effets de vibrations (Agiter Effect) </ option>
  <Option value = "taille"> Effets de taille (taille d'effet) </ option>
  <Option value = "slide"> effets de diapositives (Slide Effect) </ option>
</ Select>
 
<a href="#" id="button" class="ui-state-default ui-corner-all"> effets courir </a>
 
 
</ Body>
</ Html>

la