May 08, 2021 jQuery UI
When the animation style changes, the specified Class is added and removed for each element within the matching element collection.
To learn more
.switchClass()
method, check out the API
documentation .switchClass().
Click the button to preview the effect.
<!doctype html>
<html >
<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" rel="external nofollow" target="_blank" >
<script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" >
<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>