JqueryUI - switchClass() 开关类方法
本章将讨论 switchClass() 方法，这是一个有用的新操作类。 switchClass() 方法从一个 CSS 一个 CSS 类移动到另一个 CSS 类，为从一种状态到另一种状态的转换设置动画。
语法
在 jQueryUI 1.0 版本中添加
switchClass() 方法的基本语法如下 −
.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
| 序号 | 参数 & 说明 |
|---|---|
| 1 | removeClassName 这是一个字符串，表示要删除的 CSS 类名或以空格分隔的类名列表。 |
| 2 | addClassName 这是 String 类型，表示一个或多个类名（空格分隔），要添加到每个匹配元素的类属性中。 |
| 3 | duration 这是 Number 或 String 类型，可以选择提供 slow、normal、fast 之一， 或以毫秒为单位的效果持续时间。 如果省略，则 animate() 方法确定默认值。 它的默认值为 400。 |
| 4 | easing 要传递给 animate() 方法的缓动函数的名称。 |
| 5 | complete 这是当每个元素的效果完成时为每个元素调用的回调方法。 |
在 jQueryUI 1.9 版本中添加
在 1.9 版本中，此方法现在支持 children 选项，该选项还将为后代元素设置动画。
.switchClass( removeClassName, addClassName [, options ] )
| 序号 | 参数 & 说明 |
|---|---|
| 1 | removeClassName 这是一个字符串，表示要删除的 CSS 类名或以空格分隔的类名列表。 |
| 2 | addClassName 这是 String 类型，表示一个或多个类名（空格分隔），要添加到每个匹配元素的类属性中。 |
| 3 |
options 这代表所有动画设置。 所有属性都是可选的。 可能的值是 −
|
示例
下面的例子演示了 switchClass() 方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Switch Class Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.LargeClass {
font-family: Arial;
font-size: large;
font-weight: bold;
color: Red;
}
.NormalClass {
font-family: Arial;
font-size: small;
font-weight: bold;
color: Blue;
}
</style>
<script>
$(function() {
$('#btnSwitch').click(function() {
$(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
$(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
return false;
});
});
</script>
</head>
<body>
<div class = "NormalClass">
Tutorials Point Rocks!!!
</div>
<div class = "NormalClass">
Welcome to Tutorials Point!!!
</div>
<br />
<input type = "button" id = "btnSwitch" value = "Switch Class" />
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 switchclassexample.htm 中，并在支持 javascript 的标准浏览器中打开它，看到以下输出。 现在，您可以使用结果 −
点击 Switch Class 按钮查看盒子上的类的效果。
