本章将讨论 addClass()方法,它是用于管理jQueryUI视觉效果的方法之一. addClass()方法允许动画对CSS属性的更改.
addClass()方法将指定的类添加到匹配的元素中动画所有样式更改.
addClass ()方法的基本语法如下 :
.addClass( className [, duration ] [, easing ] [, complete ] )
Sr.No. | 参数&描述 |
---|---|
1 | className 这是一个包含一个或多个CSS类的String(以空格分隔). |
2 | 持续时间 这是Number或String类型,表示效果的毫秒数.值为0会直接在新样式中使用元素,而无需进度.它的默认值是 400 . |
3 | 缓动 这是String类型并指示这种效果的进展方式.它的默认值是 swing . |
4 | 完成 当这个元素的效果完成时,这是为每个元素调用的回调方法. |
对于1.9版本,此方法现在支持 children 选项,该选项也会为后代元素设置动画.
.addClass( className [, options ] )
Sr.No. | 参数&描述 |
---|---|
1 | className 这是一个包含一个或多个CSS类的String(以空格分隔). |
2 | 选项 这表示所有动画设置.所有属性都是可选的.可能的值为 :
|
以下示例演示了如何使用 addClass()方法.
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>jQuery UI addClass 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> <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") } }) }); </script> </head> <body> <div id = animTarget class = "elemClass"> Hello! </div> <button class = "button" id = "add">Add Class</button> <button class = "button" id = "remove">Remove Class</button> </body> </html>
让我们将上述代码保存在HTML文件中 addclassexample.htm 并在支持javascript的标准浏览器中打开它,你还必须看到以下输出.现在,您可以使用结果&减去;
单击添加类和删除类按钮以查看类对框的影响.
此示例显示如何将多个类传递给 addClass 方法.
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI addClass 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> .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">Welcome to Tutorials Point!</p> <button class = "button-1">Click me</button> </body> </html>
让我们将上述代码保存在HTML文件中 addclassexample.htm 并在支持javascript的标准浏览器中打开它,你还必须看到以下输出.现在,您可以使用结果 :