Fx.Slides是一个选项，可让您通过滑入视图来显示内容。这非常简单，但是可以增强UI的外观。

让我们讨论有关创建和初始化Fx.Slide，其选项和方法的问题。

首先，我们将使用用户定义的实例初始化Fx.Slide类。为此，我们必须创建并选择一个HTML元素。之后，我们将CSS应用于这些元素。最后，我们将使用element变量启动Fx.Slide的新实例。

Fx.Slide选项

只有两个Fx.Slide选项-模式和包装器。

模式

模式给您两个选择，“垂直”或“水平”。垂直从上到下显示，水平从左到右显示。从底部到顶部，或者从右到左，没有选择可循，据我所知，破解类本身来完成此操作相对简单。在我看来，这是我希望看到的标准选项，并且如果有人为了使该选项受了黑客欢迎，请给我们留言。

包装纸

默认情况下，Fx.Slide在您的slide元素周围抛出一个包装，使其具有“ overflow”：“ hidden”。包装器允许您将另一个元素设置为包装器。就像我在上面说过的那样，我不清楚这将在什么地方派上用场，并且希望听到任何想法（感谢mooforum.net上的马武器帮助我解决了这一问题）。

Fx.Slide方法

Fx.Slide还具有许多显示和隐藏元素的方法。

slideIn（）

顾名思义，此方法将触发start事件并显示您的元素。

滑出（）

将您的元素滑回隐藏状态。

toggle（）

这将根据其当前状态将元素滑入或滑出。添加点击事件的非常有用的方法。

隐藏（）

这将隐藏元素而没有滑动效果。

显示（）

这将显示没有滑动效果的元素。

Fx.Slide快捷方式

Fx.Slide类还提供了一些方便的快捷方式，用于向元素添加效果。

设置（’幻灯片’）

如果您在某个元素上“设置”幻灯片，则可以创建一个新实例，而不是启动一个新类。

句法

slideElement.set('slide');

设置选项

您甚至可以使用快捷方式设置选项-

句法

slideElement.set('slide', {duration: 1250});

滑动（）

一旦幻灯片是.set（），就可以使用.slide（）方法启动它。

句法

slideElement.slide('in');

.slide将接受-

• ‘在’
• ‘出’
• “切换”
• ‘显示’
• ‘隐藏’

……每个都与上述方法相对应。

例

让我们以解释Fx.Slide的示例为例。看一下下面的代码。

      
      
      
      
      
   

   
      
Start
      
Cancel
      
Complete
 
      open A
      close A

      
Here is some content - A. Notice the delay 
         before onComplete fires.  This is due to the transition effect, the onComplete 
         will not fire until the slide element stops "elasticing." Also, notice that 
         if you click back and forth, it will "cancel" the previous call and give the 
         new one priority.
 
      open B
      close B

      
Here is some content - B. Notice how 
         if you click me multiple times quickly I "chain" the events.  This slide is 
         set up with the option "link: 'chain'"
         
   

输出

单击按钮-openA，closeA，openB和closeB。观察指示器上的变化，影响和事件通知。