实现slideUp/Down效果

实现slideUp/Down效果

  最近做网页时,想做一个点击标题滑动出内容的模块,然后看了下参考的源码,结果发现有好几种做法。

第一种最简单,就是使用JQuery的slideUp/Down方法,一步搞定

第二种使用JS配合CSS3的transition属性,但是在该例子中transition需要处理与display的关系,两者貌似搭配起来不会产生效果

  解决方法是使用setTimeout延时display: none;的操作,因为我最终没有采用这种方法,留待以后检测。

第三种使用纯JS实现,即设置setTimeout来控制层的高度实现滑入滑出效果

文章目录
  1. 1. 实现slideUp/Down效果
    1. 1.0.1. 第一种最简单,就是使用JQuery的slideUp/Down方法,一步搞定
    2. 1.0.2. 第二种使用JS配合CSS3的transition属性,但是在该例子中transition需要处理与display的关系,两者貌似搭配起来不会产生效果
    3. 1.0.3. 第三种使用纯JS实现,即设置setTimeout来控制层的高度实现滑入滑出效果
,