×
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 如何使用部件库

jQuery UI 参考手册

jQuery UI API 文档API 类别 – 特效API 类别 – 特效核心API 类别 – 交互API 类别 – 方法重载API 类别 – 方法API 类别 – 选择器API 类别 – 主题API 类别 – UI 核心API 类别 – 实用工具API 类别 – 小部件

jQuery UI 实例

jQuery UI 实例拖动(Draggable)放置(Droppable)缩放(Resizable)选择(Selectable)排序(Sortable)折叠面板(Accordion)自动完成(Autocomplete)按钮(Button)日期选择器(Datepicker)对话框(Dialog)菜单(Menu)进度条(Progressbar)滑块(Slider)旋转器(Spinner)标签页(Tabs)工具提示框(Tooltip)特效(Effect)显示(Show)隐藏(Hide)切换(Toggle)添加 .addClass()移除 .removeClass()切换 .toggleClass()转换 .switchClass()颜色动画(Color Animation)定位(Position)部件库(Widget Factory)

jQuery UI API - 滑动特效(Slide Effect)


jQuery UI API 类别 – 特效jQuery UI API 类别 – 特效


所属类别

特效(Effects)

用法

描述:把元素滑动出视区。

slide

参数 类型 描述 默认值
direction String 特效的方向。可能的值:"left"、"right"、"up"、"down"。 "both"
distance Number 特效的距离。默认为元素的高度(height)还是宽度(width)取决于 direction 参数。可以设置为小于元素的宽度(width)/高度(height)的任意整数。 元素的 outerWidth

实例

使用滑动特效(Slide Effect)切换一个 div。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>滑动特效(Slide Effect)演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<p>点击任意地方进行切换。</p>
<div id="toggle"></div>
 
<script>
$( document ).click(function() {
  $( "#toggle" ).toggle( "slide" );
});
</script>
 
</body>
</html>


jQuery UI API 类别 – 特效jQuery UI API 类别 – 特效


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)