Latest web development tutorials

jQuery UI Beispiele - Conversion-Klasse (Switch-Klasse)

Wenn die Animation Stil Veränderungen innerhalb der Gruppe angepaßter Elemente hinzuzufügen und jedes Element der angegebenen Klasse entfernen.

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

.switchClass () 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 - .switchClass () 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;}
  .newClass {width: 240px; padding: 1em; Zeichenabstand: 0; font-size: 1.2em; margin: 0;}
  .anotherNewClass {text-indent: 40px; Zeichenabstand: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#Button") .click (Function () {
      $ ( ".newClass") .switchClass ( "NewClass", "anotherNewClass", 1000);
      $ ( ".anotherNewClass") .switchClass ( "AnotherNewClass", "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>