Switch 类(Switch Class)
本章将讨论switchClass()方法,它是一个有用的新操作类。 switchClass()方法从一个CSS移动到另一个CSS类,动画从一个状态到另一个状态的转换。
语法 (Syntax)
在jQueryUI的1.0版中添加
switchClass()方法的基本语法如下 -
.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
Sr.No. | 参数和描述 |
---|---|
1 | removeClassName 这是一个String,表示要删除的CSS类名称或以空格分隔的类名列表。 |
2 | addClassName 它的类型为String,表示要添加到每个匹配元素的class属性的一个或多个类名(空格分隔)。 |
3 | duration 它的类型为Number或String,可选择提供slow, normal, fast,或效果持续时间之一(以毫秒为单位)。 如果省略,则animate()方法确定默认值。 其默认值为400 。 |
4 | easing 要传递给animate()方法的缓动函数的名称。 |
5 | complete 这是对此元素的效果完成时为每个元素调用的回调方法。 |
在jQueryUI 1.9版中添加
对于1.9版本,此方法现在支持children选项,该选项还将为后代元素设置动画。
.switchClass( removeClassName, addClassName [, options ] )
Sr.No. | 参数和描述 |
---|---|
1 | removeClassName 这是一个String,表示要删除的CSS类名称或以空格分隔的类名列表。 |
2 | addClassName 它的类型为String,表示要添加到每个匹配元素的class属性的一个或多个类名(空格分隔)。 |
3 | options 这表示所有动画设置。 所有属性都是可选的。 可能的值是 -
|
例子 (Examples)
以下示例演示了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">
xnip Rocks!!!
</div>
<div class = "NormalClass">
Welcome to xnip!!!
</div>
<br />
<input type = "button" id = "btnSwitch" value = "Switch Class" />
</body>
</html>
让我们将上面的代码保存在HTML文件switchclassexample.htm ,并在支持javascript的标准浏览器中打开它,您还必须看到以下输出。
单击“ Switch Class按钮以查看类对该框的影响。