个性化阅读
专注于IT技术分析

jQuery UI addClass

点击下载

本文概述

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://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: 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

让我们以一个示例来演示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://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>
         .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>

立即测试

赞(0)
未经允许不得转载:srcmini » jQuery UI addClass

评论 抢沙发

评论前必须登录!