Latest web development tutorials

jQuery UI Beispiele - Add-Klasse (Klasse hinzufügen)

Wenn die Animationsstil geändert für jedes Element des Satzes von abgestimmten Elementen innerhalb fügt die angegebene Klasse.

Für weitere Informationen über .addClass() Einzelheiten der Methoden finden Sie in der API - Dokumentation .addClass () .

.addClass () Demo

Klicken Sie auf die Schaltfläche Effekte, um eine Vorschau. 

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI-Effekte - .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; Hintergrund: #EEE color: # 333;}
    .newClass {text-indent: 40px; Zeichenabstand: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#Button") .click (Function () {
      $ ( "#effect") .addClass ( "NewClass", 1000, Rückruf);
      return false;
    });
 
    Callback-Funktion () {
      setTimeout (function () {
        $ ( "#effect") .removeClass ( "NewClass");
      }, 1500);
    }
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "toggler">
  <Div id = "Effekt" class = "ui-Ecke-all">
      Etiam libero neque, luctus ein, eleifend nec, semper an, Lorem. Sed pede.
  </ Div>
</ Div>
 
<a href="#" id="button" class="ui-state-default ui-corner-all"> laufen Effekte </a>
 
 
</ Body>
</ Html>