55面试教程网 jQuery UI 技术教程
jQuery UI 技术教程
jQuery UI 教程jQuery UI 简介jQuery UI 下载jQuery UI 使用jQuery UI 定制jQuery UI 工作原理jQuery UI 主题jQuery UI ThemeRollerjQuery UI CSS 框架 APIjQuery UI 设计主题jQuery UI 部件库jQuery UI 通过部件库扩展小部件jQuery UI 小部件方法调用jQuery UI 为什么使用部件库jQuery UI 如何使用部件库jQuery UI API 文档jQuery UI API 类别 – 特效jQuery UI API 类别 – 特效核心jQuery UI API 类别 – 交互jQuery UI API 类别 – 方法重载jQuery UI API 类别 – 方法jQuery UI API 类别 – 选择器jQuery UI API 类别 – 主题jQuery UI API 类别 – UI 核心jQuery UI API 类别 – 实用工具jQuery UI API 类别 – 小部件jQuery UI 实例jQuery UI 实例 – 拖动(Draggable)jQuery UI 实例 – 放置(Droppable)jQuery UI 实例 – 缩放(Resizable)jQuery UI 实例 – 选择(Selectable)jQuery UI 实例 – 排序(Sortable)jQuery UI 实例 – 折叠面板(Accordion)jQuery UI 实例 – 自动完成(Autocomplete)jQuery UI 实例 – 按钮(Button)jQuery UI 实例 – 日期选择器(Datepicker)jQuery UI 实例 – 对话框(Dialog)jQuery UI 实例 – 菜单(Menu)jQuery UI 实例 – 进度条(Progressbar)jQuery UI 实例 – 滑块(Slider)jQuery UI 实例 – 旋转器(Spinner)jQuery UI 实例 – 标签页(Tabs)jQuery UI 实例 – 工具提示框(Tooltip)jQuery UI 实例 – 特效(Effect)jQuery UI 实例 – 显示(Show)jQuery UI 实例 – 隐藏(Hide)jQuery UI 实例 – 切换(Toggle)jQuery UI 实例 – 添加 Class(Add Class)jQuery UI 实例 – 移除 Class(Remove Class)jQuery UI 实例 – 切换 Class(Toggle Class)jQuery UI 实例 – 转换 Class(Switch Class)jQuery UI 实例 – 颜色动画(Color Animation)jQuery UI 实例 – 定位(Position)jQuery UI 实例 – 部件库(Widget Factory)

jQuery UI 实例 – 移除 Class(Remove Class)

jQuery UI 实例 - 移除 Class(Remove Class)

当动画样式改变时,为匹配的元素集合内的每个元素移除指定的 Class。

如需了解更多有关 .removeClass() 方法的细节,请查看 API 文档 .removeClass()

.removeClass() 演示

点击按钮预览特效。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 特效 - .removeClass() 演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  .toggler { width: 500px; height: 200px; position: relative; }
  #button { padding: .5em 1em; text-decoration: none; }
  #effect { position: relative;  width: 240px;  padding: 1em;  letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
  .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
  </style>
  <script>
  $(function() {
    $( "#button" ).click(function() {
      $( "#effect" ).removeClass( "newClass", 1000, callback );
      return false;
    });
 
    function callback() {
      setTimeout(function() {
        $( "#effect" ).addClass( "newClass" );
      }, 1500 );
    }
  });
  </script>
</head>
<body>
 
<div class="toggler">
  <div id="effect" class="newClass ui-corner-all">
    Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
  </div>
</div>
 
<a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a>
 
 
</body>
</html>