jquery的淡入淡出效果

最新推荐文章于 2022-09-04 23:56:48 发布

我是干勾鱼

最新推荐文章于 2022-09-04 23:56:48 发布

阅读量1.4k

点赞数

分类专栏： Web前端文章标签： jquery 淡入淡出 JS JavaScript

本文链接：https://blog.csdn.net/dongdong9223/article/details/50618244

版权

Web前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

转载请注明出处：http://blog.csdn.net/dongdong9223/article/details/50618244
本文出自【我是干勾鱼的博客】

jquery中使用fadeOut() 实现淡出效果，隐藏一个元素；使用fadeIn()实现淡入效果，显示一个元素：

<html>
<head>
<script type="text/javascript" src="/test/jquery-1.12.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".bb1").click(function(){
      $("div").fadeOut()
  });

  $(".bb2").click(function(){
      $("div").fadeIn();
  });
});
</script>
</head>
<body>
    <div>欢迎观临！</div>
    <button class="bb1">hide</button>
    <button class="bb2">show</button>
</body>
</html>

初始显示：

这里写图片描述

点击隐藏：

这里写图片描述

点击显示：

这里写图片描述

淡入淡出效果很明显，比普通的显示和隐藏要友好！

我是干勾鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
jquery的淡入淡出效果

jquery中使用fadeOut() 实现淡出效果，隐藏一个元素；使用fadeIn()实现淡入效果，现实一个元素：<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $
复制链接

扫一扫