标签:
我们之前实现的下拉菜单的案例,是没有动画效果的,但是在日常开发中,动画效果是经常会用到的,所以我们可以尝试使用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
fadeIn/fadeOut
使用方法与show/hide
、slideDown/slideUp
一致。
fadeIn(speed, callback);
/*
speed(可选):动画的执行时间
1.如果不传,默认是normal。
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串,slow(200)、normal(400)、fast(600)
callback(可选):执行完动画后执行的回调函数
*/
fadeOut(speed, callback);
/*
speed(可选):动画的执行时间
1.如果不传,默认是normal。
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串,slow(200)、normal(400)、fast(600)
callback(可选):执行完动画后执行的回调函数
*/
fadeToggle(speed, callback);
//如果当前元素处于隐藏状态,那么执行fadeIn操作,如果处于显示状态,那么执行fadeOut操作。
与淡入淡出的区别:淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明; 而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的!
fadeTo(speed, value, callback)
//可以设置具体的透明度
//speed(必须)
//value 0-1之间的数值(比如0.4),表示淡到某一个值。
//callback(可选) 回调函数
注意: fade系列方法:修改的是元素的opacity
show
/hide
slideUp
/slideDown
fadeIn
/fadeOut
fadeTo
方法。
toggle
slideToggle
fadeToggle
show
/slideDown
/fadeIn
三个是显示效果、hide
/slideUp
/fadeOut
三个是隐藏效果。show
/hide
修改的是元素的height
,width
,opacity
slide
系列方法修改的是元素的height
fade
系列方法修改的是元素的opacity
标签:
原文地址:http://www.cnblogs.com/lsy0403/p/5902807.html