jQuery UI 幻灯片效果

以下是关于 jQuery UI 幻灯片效果的详细攻略：

jQuery UI 幻灯片效果

jQuery UI 提供了一个名为 slide 的方法，用于实现幻灯片效果。该方法可以使元素在水平垂直方向上滑动，可以设置滑动的方向距离和持续时间。

语法

$( ".selector" ).effect(slide", {
  direction:,
  distance: number
}, duration );

参数

• direction：设置滑动的方向，可以是 up、down、left 或 right。
• distance：设置滑动的距，以像素为单位。
• duration：设置滑动持续时间，以毫秒为单位。

示例一：基本幻灯片效果

<div id="myDiv" style="width: 200px;: 200px; background: red;"></div>

<script>
$( "#myDiv" ).effect( "slide" );
</script>

这使 id 为 myDiv 的元素具有幻灯片效果，并且默认向下滑动，滑动距离为元素的高度，持续时间为 400 毫秒。

示例二：设置滑动方向和距离

```html