×
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 - 降落特效(Drop Effect)


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


所属类别

特效(Effects)

用法

描述:降落特效(Drop Effect)通过单个方向滑动的淡入淡出来隐藏或显示一个元素。

drop

参数 类型 描述 默认值
direction String 隐藏元素时元素降落的方向,显示元素时元素出现的方向。
可能的值:up、down、left、right。
"left"

实例

使用降落特效(Blind Effect)切换一个 div。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>降落特效(Drop 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( "drop" );
});
</script>
 
</body>
</html>


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


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)