Exemples jQuery UI -Basculer la classe (Toggle Class)

Lorsque le style d'animation change, selon que la classe existe et la valeur du paramètre switch, ajoutez ou supprimez une ou plusieurs classes pour chaque élément de l'ensemble d'éléments correspondants.

Pour plus d'informations sur.toggleClass()les détails de la méthode, veuillez consulter la documentation de l'API..toggleClass()。

Démo de .toggleClass()

Cliquez sur le bouton pour prévisualiser l'effet.

<!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>

Autres extensions