Latest web development tutorials

exemples d'interface utilisateur jQuery - Ajouter une classe (Ajouter classe)

Lorsque le style d'animation changé pour chaque élément de l'ensemble des éléments appariés au sein Ajoute la classe spécifiée.

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

.addClass () 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 - .addClass () 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; position: relative;}
    #button {padding: .5em 1em; text-decoration: none;}
    #effect {width: 240px; padding: 1em; font-size: 1.2em; border: 1px solid # 000; fond: #EEE; color: # 333;}
    .newClass {text-indent: 40px; letter-spacing: .4em; largeur: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#button") .cliquez (Function () {
      $ ( "#effect") .addClass ( "NewClass", 1000, rappel);
      return false;
    });
 
    fonction callback () {
      setTimeout (function () {
        $ ( "#effect") .removeClass ( "NewClass");
      }, 1500);
    }
  });
  </ Script>
</ Head>
<Body>
 
<Class Div = "de toggler">
  <Div id = "effet" class = "ui-coin-all">
      Etiam libero neque, luctus a, eleifend nec, semper à, lorem. Sed pede.
  </ Div>
</ Div>
 
<a href="#" id="button" class="ui-state-default ui-corner-all"> effets courir </a>
 
 
</ Body>
</ Html>

la