jQueryUI的添加类_H5之家 - 中国HTML5教程资源分享第一站

jQueryUI的添加类

本章将讨论addClass()方法，它是用于管理jQueryUI的视觉效果的方法之一。 addClass()方法允许动画更改到CSS属性。

addClass()方法的附加指定的类的匹配元素而动画所有样式的变化。

句法加入jQueryUI的1.0版本

的addClass()方法都有其基本语法如下：

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

参数描述

className 这是一种含有一个或多个CSS类字符串(separated by spaces) 。

duration 这是类型号或字符串的，并且指示的效果的毫秒数。 0值直接将元素在新的风格，没有进步。它的默认值是400 。

easing 这是String类型，表示在影响进步的方式。它的默认值是swing 。可能的值是在这里。

complete 这被称为用于每个元件的回调方法的效果是完全此元素时。

加入jQueryUI的1.9版本

随着1.9版本，这个方法现在支持children的选择，这也将动画后代元素。

.addClass( className [, options ] )

参数描述

className 这是一种含有一个或多个CSS类字符串(separated by spaces) 。

options 这代表所有的动画设置。所有属性都是可选的。可能的值有：

例子

下面的例子说明使用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"> <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> <style> .elemClass { width: 200px; height: 50px; background-color: #b9cd6d; } .myClass { font-size: 40px; background-color: #ccc; color: white; } </style> <script type="text/javascript"> $(document).ready(function() { $('.button').click(function() { if (this.id == "add") { $('#animTarget') .addClass("myClass", "fast") } else { $('#animTarget') .removeClass("myClass", "fast") } }) }); <div id=animTarget> Hello! </div> <button>Add Class</button> <button>Remove Class</button> </body> </html>

让我们保存上面的代码在一个HTML文件addclassexample.htm并在支持JavaScript的标准浏览器中打开它，你必须看到下面的输出。现在你可以用结果玩：

你好！

添加类删除类

点击Add Class和Remove Class按钮查看类包装盒上的效果。

传递多个班

这个例子展示了如何多个类传递给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"> <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>  <style> .red { color: red; } .big { font-size: 5em; } .spaced { padding: 1em; } { $('.button-1').click(function() { $( "#welcome" ) .addClass( "red big spaced" , 3000 ); }); }); <p>Welcome to Tutorials Point!</p> <button>Click me</button> </body> </html>

让我们保存上面的代码在一个HTML文件addclassexample.htm并在支持JavaScript的标准浏览器中打开它，你必须看到下面的输出。现在你可以用结果玩：

教程点！

点击我

赞助商链接