jQuery动画效果制作

 时间:2026-02-13 00:23:47

1、基本效果(显示与隐藏)

1)show() :显示

2)show(speed,[callback]) :以动画效果显示

3)hide() :隐藏

4)hide(speed,[callback]) :以动画效果隐藏

5)toggle() :切换显示或隐藏

6)toggle(switch) :显示或隐藏,如果switch为true代表显示,false隐藏(了解)

7)toggle(speed,[callback]) :以动画效果显示或隐藏

参数说明:

speed:动画的速度,可以是"slow"(缓慢), "normal"(正常), "fast"(快速)

   也可以理解为动画的持续时间,单位为毫秒。

[callback]:动画完成时所触发的回调函数

示例代码:

jQuery动画效果制作

jQuery动画效果制作

2、滑动效果(上下滑动)

• slideDown(speed,[callback]) :以动画效果向下滑动

• slideUp(speed,[callback]) :以动画效果向上滑动

• slideToggle(speed,[callback]) :以动画效果滑动

参数说明:

speed:动画的持续时间,单位为毫秒

[callback]:动画完成时所触发的回调函数

示例代码:

jQuery动画效果制作

jQuery动画效果制作

3、淡入淡出效果

• fadeIn(speed,[callback]) :以动画效果淡入

• fadeOut(speed,[callback]) :以动画效果淡出

• fadeTo(speed,opacity,[callback]) :设置元素的透明度 0(全透明)-1(不透明)之间

参数说明:

speed:动画的持续时间

opacity:元素的透明度,0(全透明)1(不透明)

[callback]:动画完成时所触发的回调函数

示例代码:

jQuery动画效果制作

jQuery动画效果制作

4、自定义动画效果

animate(params,[speed], [fn]) :创建自定义动画

参数说明:

params:json对象,动画参数

[speed]:动画的持续时间

[fn]:动画完成时所触发的回调函数

jQuery动画效果制作

5、5.案例01:使用自定义动画仿好123左侧导航

jQuery动画效果制作

jQuery动画效果制作

jQuery动画效果制作

6、6.案例02:一组图片的淡入淡出

jQuery动画效果制作

  • ubuntu编写java程序
  • IntelliJ IDEA如何修改背景颜色样式
  • css页面中怎么让脚部在最底下
  • eclipse如何设置控制台背景颜色?
  • 微信群名称如何修改
  • 热门搜索
    北京旅游集散中心 柳州旅游景点 白水寨旅游攻略 旅游seo 峨眉山旅游价格 哈尔滨旅游团 中国旅游网站 太行山大峡谷旅游攻略 浙江旅游地图 帛琉旅游