jQuery UI switchClass
jQuery UI switchClass
jQuery UI switchClass()方法用于从一个CSS类移动到另一个CSS类，从而实现从一种状态到另一种状态的过渡。
语法:
让我们看一下jQueryUI swithClass()方法的基本语法:
(在jQueryUI的1.0版中添加)
(在jQueryUI的1.0版中添加)
.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
switchClass()方法的参数:
removeClassName: 它是一个字符串。它表示要删除的CSS类名或用空格分隔的类名列表。
addClassName: 它是字符串类型。它表示一个或多个添加到每个匹配元素的class属性中的类名称。
duration: 这是数字或字符串类型，用于在其中指定持续时间毫秒。其默认值为400。
easing: 它指定要传递给animate()方法的easing函数的名称。
complete: 是一种回调方法，当该元素的效果完成时，将为每个元素调用该方法。
jQuery的switchClass()方法的语法:(在1.9版中添加)
新的jQueryUI 1.9版还支持子级选项，该子级选项还将进行动画处理后代元素。
语法:
.switchClass( removeClassName, addClassName [, options ] )
switchClass()方法的参数:(在1.9版中添加)
removeClassName: 这是一个字符串。它代表CSS类名或要删除的类名的空格分隔列表。
addClassName: 它是字符串类型。它表示一个或多个添加到每个匹配元素的class属性的类名称。
options: 它用于指定所有动画设置。所有属性都是可选的。其可能的值为:
duration: 这是一个字符串或数字。它指定动画将运行多长时间。默认值为400。
easing: 是一个字符串，用于指定用于过渡的缓动功能。其默认值为swing。
complete: 这是在元素完成效果后为每个元素调用的回调方法。
Children: 这是布尔类型，用于指定是否应将动画另外应用于匹配元素的所有后代。默认值为FALSE。
Queue: 这是布尔类型或字符串类型，用于指定是否将动画放置在效果队列中。其默认值为TRUE。
jQuery UI switch class()的示例
让我们以jQuery UI switchClass()方法的示例为例:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Switch Class Example</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.LargeClass
{
font-family: NewTimesRoman;
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">
You are here at bianchenghao6
</div>
<div class="NormalClass">
bianchenghao6 is commited to provide easy and point to point learning of various tutorials.
</div>
<br />
<input type="button" id="btnSwitch" value="Switch Class" />
</body>
</html>