小白了解淡入淡出

最新推荐文章于 2021-12-09 09:15:51 发布

778.

最新推荐文章于 2021-12-09 09:15:51 发布

阅读量101

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44546554/article/details/87705795

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一.
通过 jQuery，可以实现元素的淡入淡出效果
1.fadeIn() 淡入方法

<body>
<button>点击这里，使三个圆形淡入</button>
<br><br>
<div id="div1" style="width:40px;height:40px;display:none;background-color:red;border-radius:50%;"></div>
<br>
<div id="div2" style="width:40px;height:40px;display:none;background-color:green;border-radius:50%;"></div>
<br>
<div id="div3" style="width:40px;height:40px;display:none;background-color:blue;;border-radius:50%;"></div>
</body>

引入插件并写入下面代码则出现效果

<script src="../jquery/jquery-1.11.1.min.js" ></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>

2.fadeout() 淡出方法
相反代码和上面一样写的基本一样，把fadeIn换成fadeout。两者都可取值slow"、"fast’'指效果时长

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

注释：可举一反三

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

778.

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小白了解淡入淡出

一.通过 jQuery，可以实现元素的淡入淡出效果1.fadeIn() 淡入方法&lt;body&gt;&lt;button&gt;点击这里，使三个圆形淡入&lt;/button&gt;&lt;br&gt;&lt;br&gt;&lt;div id="div1" style="width:40px;height:40px;display:none;background-color:
复制链接

扫一扫