Changer de classe
Lorsque le style d'animation change, ajoutez et supprimez la classe spécifiée pour chaque élément de l'ensemble d'éléments correspondant.
Pour plus de détails sur la méthode .switchClass(), consultez la documentation de l'API pour .switchClass().
.switchClass() démontre
Cliquez sur le bouton pour prévisualiser l'effet spécial.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 特效 - .switchClass() 演示</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; letter-spacing: 0; font-size: 1.2em; margin: 0; }
.anotherNewClass { text-indent: 40px; letter-spacing: .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="effect" class="newClass ui-corner-all">
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
</div>
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
