jQuery UI addClass jQueryUIaddClass|jQueryUI

本文概述

jQueryUI addclass()示例1
jQuery UI addclass()示例2

jQuery addclass()方法用于允许对CSS属性进行更改。它将指定的类添加到匹配的元素, 同时为所有样式更改设置动画。
句法：
以下是jQuery UI addclass()方法的基本语法：（在版本1.0中添加）

.addClass( className [, duration ] [, easing ] [, complete ] )

addclass()方法的参数：

ClassName：这是一个包含一个或多个CSS类的字符串。（如果有更多的CSS类, 它们之间用空格隔开。）
持续时间：用于指定持续时间（以毫秒为单位）。 0值会将元素直接带入新样式, 而不会进行任何处理。其默认值为400。
缓和：这是一个类型字符串, 指示效果进行的方式。它的默认值是swing。
完成：此元素的效果完成时, 这是每个元素的回调方法调用。

jQuery addClass方法的语法：（在1.9版中添加）
jQueryUI的新版本1.9还支持children选项, 该选项还将为后代元素设置动画。
句法：

.addClass( className [, options ] )

1.9版中的addclass()方法的参数：
className：这是一个包含一个或多个CSS类的字符串。（如果有更多的CSS类, 它们之间用空格隔开。）
选项：用于指定所有动画设置。所有属性都是可选的。其可能的值为：

持续时间：这是一种数字或字符串, 表示效果的持续时间。以毫秒为单位。值0将直接采用新样式的元素, 而不会进行任何处理。其默认值为400。
缓解：这是一个字符串。它指定了效果进行的方式。它的默认值是swing。
完成：此元素完成效果后, 这是为每个元素调用的回调方法。
子代：这是布尔型, 指定是否应将动画另外应用于匹配元素的所有后代。其默认值为false。
队列：这是布尔类型或字符串类型, 并指定是否将动画放置在效果队列中。其默认值为TRUE。

jQueryUI addclass()示例1让我们以一个示例来演示jQueryUI addclass()方法（传递单个类）。

< !DOCTYPE html> < html> < head> < meta charset="utf-8"> < title> jQuery UI addClass 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/000244C21-0.jpg"> < /script> < script src="http://img.readke.com/220430/000244D06-1.jpg"> < /script> < style> .elemClass { width: 300px; height: 100px; background-color: #76eec6; } .myClass { font-size: 30px; background-color: #eed5b7; color: #0000ee; } < /style> < script type="text/javascript"> $(document).ready(function() { $('.button').click(function() { if (this.id == "add") { $('#animTarget').addClass("myClass", "fast") } else { $('#animTarget').removeClass("myClass", "fast") } }) }); < /script> < /head> < body> < div id=animTarget class="elemClass"> Hello! srcmini < /div> < button class="button" id="add"> Add Class< /button> < button class="button" id="remove"> Remove Class< /button> < /body> < /html>

立即测试
jQuery UI addclass()示例2【jQuery UI addClass】让我们以一个示例来演示jQueryUI addclass()（传递多个类）

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI addClass 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/000244C21-0.jpg"> < /script> < script src="http://img.readke.com/220430/000244D06-1.jpg"> < /script> < !-- CSS --> < style> .red { color: red; } .big { font-size: 5em; } .spaced { padding: 1em; } < /style> < script> $(document).ready(function() { $('.button-1').click(function() { $( "#welcome" ).addClass( "red big spaced", 3000 ); }); }); < /script> < /head> < body> < p id="welcome"> You are here at- srcmini< /p> < button class="button-1"> Click here< /button> < /body> < /html>

立即测试