下拉、淡入淡出

最新推荐文章于 2023-04-10 17:09:38 发布
最新推荐文章于 2023-04-10 17:09:38 发布
阅读量224 收藏
点赞数 1
分类专栏： jquery 文章标签： javascript html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huijie_0716/article/details/124807645
版权

 下拉

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      ul {
        list-style: none;
      }
      .box {
        width: 150px;
        margin: 0 auto;
      }
      .box h2 {
        position: relative;
        width: 150px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #f00;
      }
      .box h2 .sj {
        position: absolute;
        top: 14px;
        right: 20px;
        width: 0;
        height: 0;
        border: 10px solid rgba(0, 0, 0, 0);
        border-top-color: #222;
      }
      .box .list {
        display: none;
        width: 150px;
        height: 200px;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h2>
        标题
        <i class="sj"></i>
      </h2>
      <ul class="list">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
      </ul>
      <h2>
        标题
        <i class="sj"></i>
      </h2>
      <ul class="list">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
      </ul>
    </div>
  </body>
  <script>
    // 第一种
    // $(document).ready(function () {
    //   $(".box h2").click(function () {
    //     var $dis = $(this).next(".list").css("display");
    //     if ($dis === "none") {
    //       $(this).next(".list").css("display", "block");
    //       $(this).children(".sj").css("transform", "rotate(90deg)");
    //     } else {
    //       $(this).next(".list").css("display", "none");
    //       $(this).children(".sj").css("transform", "rotate(0deg)");
    //     }
    //   });
    // });

    // 第二种
    // $(document).ready(function () {
    //   $(".box h2").click(function () {
    //     $(this)
    //       .next(".list")
    //       .show(1000, function () {
    //         $(this).hide(2000);
    //       }); //回调函数
    //     // $(this).next(".list").hide();
    //   });
    // });

    // 第三种
    // $(document).ready(function () {
    //   $(".box h2").click(function () {
    //     var list = $(this).next(".list"); //当前点击的h2后的那一个ul
    //     list.show(5000, function () {
    //       // console.log(this);
    //       $(this).hide(2000); //指向的是有动画的jquery对象
    //     }); //回调函数
    //     // $(this).next(".list").hide(5000);
    //   });
    // });

    // 第四种
    $(document).ready(function () {
      $(".box h2").click(function () {
        var list = $(this).next(".list"); //当前点击的h2后的那一个ul
        list.toggle(200);
      });
    });

    // 显示与隐藏
    // jquery对象.show(参数1，参数2)
    // 参数1：可选 动画持续时间
    // 参数2：可选 回调函数  动画执行完后调用的函数

    // jquery对象.hide(参数1，参数2)
    // 参数1：可选 动画持续时间
    // 参数2：可选 回调函数  动画执行完后调用的函数
  </script>
</html>

淡入淡出

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      ul {
        list-style: none;
      }
      .box {
        width: 150px;
        margin: 0 auto;
      }
      .box h2 {
        position: relative;
        width: 150px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #f00;
      }
      .box h2 .sj {
        position: absolute;
        top: 14px;
        right: 20px;
        width: 0;
        height: 0;
        border: 10px solid rgba(0, 0, 0, 0);
        border-top-color: #222;
      }
      .box .list {
        display: none;
        width: 150px;
        height: 200px;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h2>
        标题
        <i class="sj"></i>
      </h2>
      <ul class="list">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
      </ul>
    </div>
  </body>
  <script>
    $(function () {
      $(".box h2").bind("click", function () {
        // 淡入淡出
        // 从看不见到看得见 淡入0-1 fadeIn()
        // 从看得见到看不见 淡入1-0 fadeOut()
        // $(".list").fadeIn(5000).fadeOut(2000);

        // $(".list").fadeToggle(2000);
        $(".list").fadeTo(2000, 0.5, function () {});

        // 往上滑动/往下滑动
        // $(".list").slideDown(5000, function () {
        //   $(this).slideUp(2000);
        // });

        // $(".list").slideDown(5000);
        // $(".list").slideUp(5000);

        // $(".list").slideDown(5000).slideUp(5000);

        // $(".list").slideToggle("normal");//400
        $(".list").slideToggle("slow"); //600
        // $(".list").slideToggle("fast"); //200
        // $(".list").slideToggle(400);
      });
    });

    // $(function () {
    //   //   // 绑定方式 第一种
    //   //   // $(".box").click(function () {});
    //   //   // dom.onclick=function(){}
    //   //   // 绑定方式 第二种
    //   //   $(".box h2").bind("click", function () {
    //   //     console.log(111);
    //   //   });
    //   //   // 绑定方式 第三种
    //   //   $(".box h2").on("click", function () {
    //   //     console.log(111);
    //   //   });
    //   // dom.addEventListener("click",function(){})
    // });
  </script>
</html>

 

huijie_0716
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
transition实现的鼠标悬停淡入淡出的效果
weixin_44509862的博客
04-09 1172
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>transition实现的鼠标悬停淡入淡出的效果</title> <style type="text/css"> d...
CSS3使用transition实现的鼠标悬停淡入淡出
09-25
主要介绍了CSS3使用transition实现的鼠标悬停淡入淡出的效果，十分炫酷，需要的小伙伴快来参考下。
淡入淡出
llthh的博客
04-27 272
下面我们使用css3的一个transform的一个属性来实现一个隐藏的一个效果 例子： 当我们把鼠标移上去的时候 就会有一个绿色的一个效果 他就是用了transform的一个属性，先把绿色部分用transform:translateY(-205px)的盒子移到上面，再利用overflow：hidden; 的属性把超出的部分隐藏起来 然后设置伪类 就可以达到预想的效果 ...
Vue-动画，过度类名transition实现自定义文字渐入渐出
保持饥渴、好奇
08-10 2312
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--//导入js包--> <script src="js/vue.js"></script&g...
UIView动画【渐入alpha、淡出、移动frame、缩放transform、旋转transform rotation】
逆钟夕的忘忧阁
10-25 1233
#import "AppDelegate.h" @implementation AppDelegate - (void)dealloc { [_window release]; [base release]; [super dealloc]; } - (BOOL)application:(UIApplication *)application didFinishLau
jquery实现的淡入淡出下拉菜单效果
10-23
主要介绍了jquery实现的淡入淡出下拉菜单效果,涉及jquery操作页面属性的动态添加与删除相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery实现淡入淡出二级下拉导航菜单的方法
10-23
主要介绍了jQuery实现淡入淡出二级下拉导航菜单的方法,涉及jquery简单操作页面元素展开与隐藏的实现技巧,非常具有实用价值,需要的朋友可以参考下
jQuery淡入淡出下拉菜单特效代码
03-20
"jQuery淡入淡出下拉菜单特效代码"就是一个典型的例子，它利用jQuery的动画效果来提升网站导航菜单的视觉吸引力。 这个特效的核心在于，当用户将鼠标悬停在主菜单项上时，下拉菜单会以淡入的方式出现，而不是突然跳...
jQuery淡入淡出下拉菜单.zip
07-04
本教程将详细讲解如何利用jQuery创建一款淡入淡出效果的下拉菜单，提升网站的导航体验。 首先，jQuery淡入淡出下拉菜单的核心在于利用jQuery的动画效果和事件监听来实现动态交互。当用户鼠标悬停在主菜单项上时，子...
transition实现自定义tips淡入淡出效果
weixin_30770495的博客
05-15 169
transition实现动画的时候，只能实现指定属性的渐变，元素显隐要通过opacity来实现： 做了一个小的demo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>transition-demo</title> &l...
CSS3渐变、过渡、转换、动画
weixin_49491274的博客
04-10 557
e66465#9198e52.从左到右：rightredyellowbottomrightredyellowredyellowgreen5.从左到右的线性渐变，带有透明度：right, rgba(255000), rgba(255001));6.重复的线性渐变repeating-linear-gradient() 函数用于重复线性渐变：redyellowgreenred5yellow15green60。
css实现内容渐进移动效果
abiao555的博客
02-03 492
<style> .live_list li,.activity_list li{ width: 393px; height: 445px; float: left; border-right: 1px solid rgba(216, 216, 216, 1); padding: 30px 35px 22px; ...
CSS实现div淡入淡出
weixin_43732987的博客
02-01 9008
CSS实现div淡入淡出 css文件 #info{ display: none; top: 10%; left: 32%; width: 55%; height: 65%; background-color: white; z-index: 1002; overflow: auto; animation: anim 2s; } @keyframes anim { 0% {op...
css动画效果代码淡入淡出折叠展开点击悬浮
qq_27161847的博客
03-09 1788
css动画效果代码淡入淡出折叠展开点击悬浮
Vue中transition过渡动画，出现两个页面同时出现的问题解决方法（从左往右，淡入淡出过渡动画）
weixin_42966151的博客
12-20 1330
Vue中transition过渡动画，出现两个页面同时出现的问题解决方法（从左往右，淡入淡出过渡动画）
HTML如何做出渐出效果,简单的CSS3制作的文本渐入渐出动效
weixin_35385921的博客
06-04 2111
CSS语言：CSSSCSS确定body {background: #310404;font-family: 'Roboto Condensed', sans-serif;}.container {position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 0;background: -webkit-radial-grad...
HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）
热门推荐
u014063717的博客
03-17 4万+
两个场景（即两个div视图）切换的时候，如果想添加个过渡动画，除了可以使用js来实现，还可以通过CSS3的animation属性来实现。 （注意：Internet Explorer 9 以及更早的版本不支持 animation 属性。）下面做了个过渡动画汇总，包含常见的动画效果，效果图如下： 点击此处查看运行效果。 代码如下：<!DOCTYPE html> <html> <head> <m
android 渐入渐出动画,微信小程序实现渐入渐出动画效果
weixin_35797963的博客
05-26 560
前言在做小程序列表展示的时候，接到了一个需求。需要在列表展示的时候加上动画效果。设计视频效果如下图：需要在进入列表页的时候，依次展示每一条卡片，在展示完成后需要隐藏掉当天之前的卡片。实现思路实现该动画效果，首先需要给每个卡片添加一个css动画。因为每个卡片的显示是有时间间隔的，以及考虑到展示完成后的隐藏效果，所以动画效果需要用js动态去添加。在看了微信开发文档后，发现微信小程序提供了Animati...
2-10 CSS动画（transform全解、绝对定位元素居中、transition过渡、animation）
前端知识库
04-15 1877
浏览器渲染原理 1.概念 帧：每个静止的画面叫做帧 播放速度：每秒24帧（影视）或者每秒30帧（游戏） 2.浏览器渲染过程 步骤 1.根据HTML构件HTML树 2.根据CSS构件CSS树 3.将两棵树合并成一棵渲染树（render tree） 4.Layout布局（文档流、盒模型、计算大小和位置）：相当于布局框架，一幅画的素描结构 5.Paint绘制（把边框颜色、文字颜色、阴影等画出来） 6.Compose合成（根据层叠关系展示画面）：就像ps绘图一样，把每一层的内容合并拍平成一层。 树： 3.如何更新
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery.min.js"></script> </head> <body> <button>下拉滑动</button> <button>上拉滑动</button> <button>切换滑动</button> <br><br> <button>显示</button> <button>隐藏</button> <button>切换</button> <br><br> <button>淡入效果</button> <button>淡出效果</button> <button>淡入淡出切换</button> <button>修改透明度</button> <br><br> <button>自定义动画</button> <br><br> <div></div> </body> <style> div { position: absolute; width: 150px; height: 300px; background-color: pink; display: none; } </style> <script> $(function(){ $("button").eq(10).click(function() { $("div").animate({ left: 500, top: 300, opacity: .4, width: 500 }, 500); }); }); </script> </html>代码有误问题
最新发布
05-30
这段代码中有一个小问题：在 `$("button").eq(10)` 这行代码中，它假设页面上有 11 个 `button` 元素，因此这个代码会选择第 11 个 `button` 元素。但是实际上这个页面上只有 10 个 `button` 元素，因此这行代码会...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值