Latest web development tutorials

jQuery UI Beispiel - Schalt Klasse (Toggle-Klasse)

Wenn die Animationsstil geändert, entsprechend Klasse Existenz und den Wert des Schalters Parameter innerhalb des Satzes von aufeinander abgestimmten Elemente jedes Element eine oder mehrere Klasse hinzuzufügen oder zu entfernen.

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

.toggleClass () 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 - .toggleClass () 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 {position: relative; width: 240px; padding: 1em; Zeichenabstand: 0; 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") .toggleClass ( "NewClass", 1000);
      return false;
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "toggler">
  <Div id = "Effekt" class = "NewClass 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>