jQuery UI Beispiele -Toggle Class (Toggle Class)

Wenn sich der Animationsstil ändert, fügen Sie abhängig davon, ob die Klasse existiert und welchen Wert der switch-Parameter hat, eine oder mehrere Klassen für jedes Element in der übereinstimmenden Menge von Elementen hinzu oder entfernen Sie sie.

Weitere Informationen über.toggleClass()die Details der Methode finden Sie in der API-Dokumentation..toggleClass()。

.toggleClass() Demo

Klicken Sie auf die Schaltfläche, um den Effekt in der Vorschau anzuzeigen.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 特效 - .toggleClass() 演示</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; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
  .newClass { text-indent: 40px; letter-spacing: .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="effect" class="newClass ui-corner-all">
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
  </div>
</div>
 
<a href="../index.html" id="button" class="ui-state-default ui-corner-all">运行特效</a>
 
 
</body>
</html>

Andere Erweiterungen