jQuery效果之隐藏、显示、淡入淡出、滑动、回调
程序员文章站
2024-03-25 12:16:34
...
一、显示、隐藏
$(selector).hide(speed,callback);//隐藏,实际上是把元素的height、width、margin、opacity等在给定的时间内逐渐缩小为0最后
//把display设置为 none
$(selector).show(speed,callback);//显示,过程与hide相反
$(selector).toggle(speed,callback);//显示/隐藏切换
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
二、淡入淡出
$(selector).fideOut(speed,callback);//淡出,把元素的opacity等在给定的时间内逐渐缩小为0最后把display设置为 none
$(selector).fideIn(speed,callback);//淡入,过程与fideOut相反
$(selector).fideToggle(speed,callback);//淡入/淡出
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
三、滑动
$(selector).slideUp(speed,callback);//滑出,实际上是把元素的height、width、margin、margin-等在
//给定的时间内逐渐缩小为0最后把display设置为 none
$(selector).slideDown(speed,callback);//滑入,过程与fideOut相反
$(selector).slideToggle(speed,callback);//滑入/滑出
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
四、jQuery方法链接
在相同的元素上运行多条jQuery命令,一条接着另一条。
$("p").css("colot","red").slideUp(2000).slideDown(2000);
或者
$("p").css("color","red")
.slideUp(2000)
.slideDown(2000);