jquery-淡入淡出效果

最新推荐文章于 2021-09-25 18:48:31 发布

饭一碗

最新推荐文章于 2021-09-25 18:48:31 发布

阅读量675

点赞数

分类专栏： jquery 文章标签： jquery-淡入淡出效果 fadeIn fadeOut fadeTo fadeToggle

老铁们，没点关注点波关注哈~

本文链接：https://blog.csdn.net/fanrenxiang/article/details/78759039

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先来个效果图：

jquery.fadeIn() / jquery.fadeOut()

可以实现页面元素的淡入、淡出效果

语法：

$(selector).fadeIn(speed,callcack);
$(selector).fadeOut(speed,callcack);

(可选) speed 参数规定等待效果的时长，可取下列值："slow"、"fast" 或毫秒

(可选) callback 参数是 fading 完成后执行的函数名称

jquery.fadeToggle()

综合fadeIn()和fadeOut()效果，切换效果，参数释义同上

语法：

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

jquery.fadeTo()

元素渐变为指定透明度

语法：

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

(必需) speed 参数规定等待效果的时长，可以取以下值："slow"、"fast" 或毫秒

(必需) opacity 参数将淡入淡出效果设置为给定的不透明度（ 0 与 1 之间）

(可选) callback 参数是该函数完成后所执行的函数名称。

实例代码(效果如前图)：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<button type="button" οnclick="fadeout();">隐藏显示的元素</button>
<button type="button" οnclick="fadein();">显示隐藏的元素</button>
<button type="button" οnclick="fadetoggle();">综合前两个</button>
<button type="button" οnclick="fadeto();">指定透明度</button>
<br/><br/>
<div id="content">这里是一个动态的段落</div>
<script>
  function fadeout(){
    $("#content").fadeOut();
  }
  function fadein(){
    $("#content").fadeIn();
  }
  function fadetoggle(){
    $("#content").fadeToggle();
  }
  function fadeto(){
    $("#content").fadeTo(500,0.1);
  }
</script>
</body>
</html>