Ajouter une classe (Ajouter une classe)
Lorsque le style d'animation change, ajoutez la classe spécifiée à chaque élément de l'ensemble d'éléments correspondant.
Pour plus de détails sur la méthode .addClass(), consultez la documentation de l'API pour .addClass().
.addClass() démontre
Cliquez sur le bouton pour prévisualiser les effets spéciaux.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 特效 - .addClass() 演示</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 { width: 240px; padding: 1em; 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" ).addClass( "newClass", 1000, callback );
return false;
});
function callback() {
setTimeout(function() {
$( "#effect" ).removeClass( "newClass" );
}, 1500 );
}
});
</script>
</head>
<body>
<div class="toggler">
<div id="effect" class="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
