jQuery 动画
动画隐藏和显示
hide
$(selector).hide(speed,callback)//隐藏
$(selector).show(speed,callback)//显示
speed参数有:slow fas normal milliseconds
例子:
$(function(){ $("button").click(function(){ $("p").hide(1000,function(){ $("p").show(1000); }) }) })
切换与滑动
$(select).toggle(speed,callback); //切换功能
toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素,同一个按钮可以点击
两次,实现隐藏和显示的效果,其实某些特定用途可以代替他们
$(selector).slideDown(speed,callback); // 向下滑动 并显示遮挡
$(selector).slideUp(speed,callback);// 向上滑动 ,并隐藏遮挡
$(selector).slideToggle(speed,callback);// 上下滑动 ,实现切换
例子
$(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); html 代码 <div class="panel"> <p>啦啦啦啦</p> <p>123456</p> </div> <p class="flip">点下试试</p>
fadeOut在指定的一段时间内降低元素的不透明度,直到元素完全消失fadeIn则相反
$(selector). fadeOut(speed,callback) //变淡至空
$(selector). fadeIn(speed,callback) //变亮至全部
$(selector). fadeTo(speed,opacity,callback) //变淡至指定效果 opacity亮度直用0.0 ~ 1.0之间
$(selector).animate({params},duration,easing,callback) //动画
params: 变化后的CSS效果,如:{height:300}
duration:变化速度用毫秒
easing:变化效果的名称(
相关推荐
小仙儿 2020-02-23
81463166 2019-12-22
donghongbz 2020-05-15
donghongbz 2019-11-05
tztzyzyz 2020-07-05
87281248 2020-07-04
tztzyzyz 2020-05-31
81463166 2020-05-17
81463166 2020-05-16
donghongbz 2020-05-15
89510194 2020-05-15
88284453 2020-05-09
GDYG 2020-05-04
88570299 2020-05-12
89510194 2020-05-07
tthappyer 2020-05-04
80437916 2020-05-03
牵手白首 2020-04-29
80437916 2020-04-25