jQuery 基础教程 （五）之使用jQuery创建动画效果

一、jQuery 中的动画: 隐藏和显示

（1）hide()

     在 HTML 文档中, 为一个元素调用 hide() 方法会将该元素的 display 样式改为 none. 代码功 能同 css(“display”, “none”);

（2）show()

    将元素的 display 样式改为先前的显示状 态.

以上两个方法在不带任何参数的情况下, 作用是立 即隐藏或显示匹配的元素, 不会有任何动画. 可以 通过制定速度参数使元素动起来.

以上两个方法会同时减少(增大)内容的高度, 宽度 和不透明度.

 

二、jQuery 中的动画(2)

（1）fadeIn(), fadeOut()只改变元素的透明度.

      fadeOut() 会在指定的一段时间内降低元素的 不透明度, 直到元素完全消失. fadeIn() 则相反.

（2）slideDown(), slideUp(): 只会改变元素的高度

     如果一个元素的 display 属性为 none, 当调用 slideDown() 方法时, 这个元素将由上至下延伸 显示. slideUp() 方法正好相反, 元素由下至上缩 短隐藏.

 

三、jQuery 中的动画(3)

（1）toggle(): 切换元素的可见状态: 如果元素时 可见的, 则切换为隐藏; 如果元素时隐藏的, 则切换为可见的.

（2）slideToggle(): 通过高度变化来切换匹配元 素的可见性.

（3）fadeTo(): 把不透明度以渐近的方式调整到 指定的值(0 – 1 之间).