jQuery的淡入淡出

最新推荐文章于 2023-12-14 19:51:15 发布

量变决定质变

最新推荐文章于 2023-12-14 19:51:15 发布

阅读量287

点赞数

分类专栏： ————jQuery

本文链接：https://blog.csdn.net/nangeali/article/details/81158684

版权

63 篇文章 1 订阅

订阅专栏

fade方法
有四个方法
fadeIn()
fadeOut()
fadeToggle()
fadeTo()

淡入已隐藏的元素

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

语法格式

$(selector).fadeIn(speed,callback);

speed
可选参数，规定隐藏/显示的速度
可以取以下值：”slow”、”fast”或毫秒

callback
可选参数，隐藏或显示完成后所执行的函数名称
类似于回调函数

淡出可见元素

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

语法格式

$(selector).fadeOut(speed,callback);

同上

在fadeIn()与fadeOut()方法之间进行切换
如果元素已淡出，则fadeToggle()会向元素添加淡入效果
如果元素已淡入，则fadeToggle()会向元素添加淡出效果

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

语法格式

$(selector).fadeToggle(speed,callback);

同上

渐变为给定的不透明度，值介于0与1之间

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

语法格式

$(selector).fadeTo(speed,opacity,callback);

Speed、callback同上
Opacity
必选参数，将淡入淡出效果设置为，给定的不透明度，值介于0与1之间

关注

专栏目录