我们之前实现的下拉菜单的案例,是没有动画效果的,但是在日常开发中,动画效果是经常会用到的,所以我们可以尝试使用 jQuery 动画,将下拉菜单案例实现的更动感一些。
jQuery 提供了三组动画,这些动画都是标准的、有规律的效果,同时 jQuery 还提供了自定义动画的功能。
显示 (show) 与隐藏 (hide) 是一组动画:
- show([speed], [callback]);
- /*
- speed(可选):动画的执行时间
- 1.如果不传,就没有动画效果。
- 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
- 3.固定字符串,slow(200)、normal(400)、fast(600),如果传其他字符串,则默认为normal。
- callback(可选):执行完动画后执行的回调函数
- */
与
方法的用法完全一致。
- show
- hide([speed], [callback]);
- /*
- speed(可选):动画的执行时间
- 1.如果不传,就没有动画效果。
- 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
- 3.固定字符串,slow(200)、normal(400)、fast(600),如果传其他字符串,则默认为normal。
- callback(可选):执行完动画后执行的回调函数
- */
toggle() 方法可以用来切换元素的可见状态。
参数和
方法基本一致
- show/hide
- Toggle(speed, callback);
- //如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
注意:
:修改的是元素的
- show/hide
、
- width
、
- height
。
- opacity
滑入
与滑出
- slideUp
是一组动画,效果与卷帘门类似。
- slideDown
, 使用方法与
- slideUp/slideDown
基本一致。
- show/hide
- slideUp(speed, callback);
- /*
- speed(可选):动画的执行时间
- 1.如果不传,默认为normal,注意和show/hide的区别。
- 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
- 3.固定字符串,slow(200)、normal(400)、fast(600)
- callback(可选):执行完动画后执行的回调函数
- */
- slideDown(speed, callback);
- /*
- speed(可选):动画的执行时间
- 1.如果不传,默认为normal,注意和show/hide的区别。
- 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
- 3.固定字符串,slow(200)、normal(400)、fast(600)
- callback(可选):执行完动画后执行的回调函数
- */
- $(selector).slideToggle(speed, callback);
- //如果是隐藏状态,那么执行slideDown操作,如果是显示状态,那么执行slideUp操作。
注意:slideUp/slideDown:修改的是元素的 height
来源: http://www.cnblogs.com/lsy0403/p/5902807.html