jQuery removeClass()方法用于管理jQueryUI视觉效果。它从元素中删除应用的类。
removeClass()方法在对所有样式更改进行动画处理时, 将指定的类删除到匹配的元素。
句法:
以下是jQueryUI removeclass()方法的基本语法:(在jQueryUI 1.0版中添加)
.removeClass( className [, duration ] [, easing ] [, complete ] )
removeClass()方法的参数:
- ClassName:这是一个包含一个或多个CSS类的字符串。 (如果有更多的CSS类, 它们之间用空格隔开。)
- 持续时间:用于指定持续时间(以毫秒为单位)。 0值会将元素直接带入新样式, 而不会进行任何处理。其默认值为400。
- 缓和:这是一个类型字符串, 指示效果进行的方式。它的默认值是swing。
- 完成:当此元素的效果完成时, 这是每个元素的回调方法调用。
jQueryUI的新版本1.9还支持children选项, 该选项还将为后代元素设置动画。
句法:
.removeClass( className [, options ] )
1.9版中的removeClass()方法的参数:
className:这是一个包含一个或多个CSS类的字符串。 (如果有更多的CSS类, 它们之间用空格隔开。)
选项:用于指定所有动画设置。所有属性都是可选的。其可能的值为:
- 持续时间:这是一种数字或字符串, 表示效果的持续时间。以毫秒为单位。值0将直接采用新样式的元素, 而不会进行任何处理。其默认值为400。
- 缓解:这是一个字符串。它指定了效果进行的方式。它的默认值是swing。
- 完成:此元素完成效果后, 这是为每个元素调用的回调方法。
- 子代:这是布尔型, 指定是否应将动画另外应用于匹配元素的所有后代。其默认值为false。
- 队列:这是布尔类型或字符串类型, 并指定是否将动画放置在效果队列中。其默认值为TRUE。
<
!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/005043F56-0.jpg">
<
/script>
<
script src="http://img.readke.com/220430/0050434440-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 removeClass】立即测试
推荐阅读
- jQuery UI进度栏
- jQuery UI菜单
- jQuery UI简介
- jQuery UI隐藏
- jQuery UI功能
- jQuery UI效果
- jQuery UI缓和
- jQuery UI Droppable
- jQuery UI可拖动