jQuery UI 教程
jQuery UI 简介
jQuery UI 下载
jQuery UI 使用
jQuery UI
jQuery UI 工作原理
jQuery UI 主题
jQuery UI ThemeRoller
jQuery UI CSS 框架 API
jQuery UI 设计主题
jQuery UI 部件库
jQuery UI 扩展小部件
jQuery UI 小部件方法调用
jQuery UI 为什么使用部件库
jQuery UI 如何使用部件库
jQuery UI 文档 API
API 类别 - 特效
API 类别 - 特效核心
API 类别 - 交互
API 类别 - 方法重载
API 类别 - 方法
API 类别 - 选择器
API 类别 - 主题
API 类别 - UI 核心
API 类别 - 实用工具
API 类别 - 小部件
jQuery UI 实例
拖动（Draggable）
放置（Droppable）
缩放（Resizable）
选择（Selectable）
排序（Sortable）
折叠面板（Accordion）
自动完成（Autocomplete）
按钮（Button）
日期选择器（Datepicker）
对话框（Dialog）
菜单（Menu）
进度条（Progressbar）
滑块（Slider）
旋转器（Spinner）
标签页（Tabs）
工具提示框（Tooltip）
特效（Effect）
显示（Show）
隐藏（Hide）
切换（Toggle）
添加 Class（Add Class）
移除 Class（Remove Class）
切换 Class（Toggle Class）
转换 Class（Switch Class）
颜色动画（Color Animation）
定位（Position）
部件库（Widget Factory）
jQuery UI 教程
jQuery UI 参考手册
jQuery UI 实例
jQuery UI 实例
拖动（Draggable）
放置（Droppable）
缩放（Resizable）
选择（Selectable）
排序（Sortable）
折叠面板（Accordion）
自动完成（Autocomplete）
按钮（Button）
日期选择器（Datepicker）
对话框（Dialog）
菜单（Menu）
进度条（Progressbar）
滑块（Slider）
旋转器（Spinner）
标签页（Tabs）
工具提示框（Tooltip）
特效（Effect）
显示（Show）
隐藏（Hide）
切换（Toggle）
添加 Class（Add Class）
移除 Class（Remove Class）
切换 Class（Toggle Class）
转换 Class（Switch Class）
颜色动画（Color Animation）
定位（Position）
部件库（Widget Factory）
jQuery UI 中文参考手册
当动画样式改变时，根据 Class 是否存在以及 switch 参数的值，为匹配的元素集合内的每个元素添加或移除一个或多个 Class。
如需了解更多有关 .toggleClass() 方法的细节，请查看 API 文档 .toggleClass()。
.toggleClass() 演示
点击按钮预览特效。
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 特效 - .toggleClass() 演示</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" ).toggleClass( "newClass", 1000 );
return false;
});
});
</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>运行实例 »
点击 "运行实例" 按钮查看在线实例
相关视频
24小时阅读榜
精品课程
独孤九贱(2)_CSS视频教程
共22课时
24.1万人学习
独孤九贱(3)_JavaScript视频教程
共28课时
35.8万人学习
独孤九贱(4)_PHP视频教程
共89课时
131.8万人学习
热门下载
phpStudy 2018最新版
集成PHP7，16种组合，超全大合集
下载
vc9-vc14（32+64位）运行库合集（链接在下方）
phpStudy安装所需运行库集合下载
下载
php程序员工具箱完整版
程序员工具箱 v1.0 php集成环境
下载
SublimeText3汉化版
中文版，非常好用
下载
Notepad++ Windows版
Notepad++ 8.9.7 Windows版官方安装包，适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。
下载
phpStudy V8.1（Win64位）（已支持php8）
Win64位，支持php多版本共存
下载