jQuery UI switchClass jQueryUIswitchClass|jQueryUI

jQuery UI switchClass()方法用于从一个CSS类移动到另一个CSS类, 从而实现从一种状态到另一种状态的过渡。
句法：
让我们看一下jQueryUI swithClass()方法的基本语法：（在jQueryUI 1.0版中添加）

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )

switchClass()方法的参数：
removeClassName：它是一个字符串。它代表CSS类名或要删除的类名的空格分隔列表。
addClassName：它是字符串类型。它代表一个或多个添加到每个匹配元素的class属性的类名称。
duration：这是数字或字符串类型, 用于指定持续时间（以毫秒为单位）。其默认值为400。
缓动：它指定要传递给animate()方法的缓动函数的名称。
complete：此元素的效果完成后, 它是为每个元素调用的回调方法。
jQuery switchClass()方法的语法：（在1.9版中添加）
jQueryUI的新版本1.9还支持children选项, 该选项还将为后代元素设置动画。
句法：

.switchClass( removeClassName, addClassName [, options ] )

switchClass()方法的参数：（在1.9版中添加）
【jQuery UI switchClass】removeClassName：它是一个字符串。它代表CSS类名或要删除的类名的空格分隔列表。
addClassName：它是字符串类型。它代表一个或多个添加到每个匹配元素的class属性的类名称。
选项：用于指定所有动画设置。所有属性都是可选的。其可能的值为：

持续时间：这是一个字符串或数字。它指定动画将运行多长时间。其默认值为400。
缓动：这是一个字符串, 它指定用于过渡的缓动功能。它的默认值是swing。
完成：此元素的效果完成后, 它是为每个元素调用的回调方法。
子代：这是布尔型, 指定是否应将动画另外应用于匹配元素的所有后代。其默认值为FALSE。
队列：这是布尔类型或字符串类型, 并指定是否将动画放置在效果队列中。其默认值为TRUE。

jQuery UI开关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://img.readke.com/220430/01353163W-0.jpg"> < /script> < script src="http://img.readke.com/220430/013531L04-1.jpg"> < /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 srcmini < /div> < div class="NormalClass"> srcmini is commited to provide easy and point to point learning of various tutorials. < /div> < br /> < input type="button" id="btnSwitch" value="http://www.srcmini.com/Switch Class" /> < /body> < /html>

立即测试