纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

jQuery淡入淡出效果 jQuery实现淡入淡出效果

Wellfancy   2021-08-08 我要评论
想了解jQuery实现淡入淡出效果的相关内容吗,Wellfancy在本文为您仔细讲解jQuery淡入淡出效果的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:jQuery,淡入淡出,下面大家一起来学习吧。

用jQuery完成淡入淡出效果前,我们先来认识几个代码:

  • 淡入 fadeIn([ speed , [easing] , [fn] ]),参数都可不写
  • 淡出 fadeOut([ speed , [easing] , [fn] ]),参数都可不写
  • 淡入淡出切换 fadeToggle([ speed , [easing] , [fn] ]),参数都可不写
  • 修改透明度 fadeTo([ [speed] , opacity , [easing] , [fn] ]),注意,这里速度和透明度一定要写

其中

  • speed是速度
  • easing是切换效果
  • fn是回调函数

那我们把上述代码放到整体代码中看下效果

完整代码如下

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Wellfancy</title>
    <style>
        div {
   margin: 10px;
   padding: 10px;
   width: 100px;
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
 
<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div>
  <img src="images/1.jpg" style="width: 280px;">
 </div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function() {
                $("div").fadeOut(1000);
 
            })
            $("button").eq(2).click(function() {
                $("div").fadeToggle(1000);
 
            });
            $("button").eq(3).click(function() {
                $("div").fadeTo(1000, 0.5);
 
            });
 
        });
    </script>
</body>
 
</html>

相关文章

猜您喜欢

  • Spring WebFlux 参数校验 Spring WebFlux实现参数校验的代码实例

    想了解Spring WebFlux实现参数校验的代码实例的相关内容吗,lzyer在本文为您仔细讲解Spring WebFlux 参数校验的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Spring,WebFlux,参数校验,Spring,参数校验,下面大家一起来学习吧。..
  • jQuery下拉菜单滑动效果 jQuery实现下拉菜单滑动效果

    想了解jQuery实现下拉菜单滑动效果的相关内容吗,小白变怪兽在本文为您仔细讲解jQuery下拉菜单滑动效果的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:jQuery下拉菜单滑动,jQuery菜单滑动,jQuery下拉菜单,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.freefLashonLinegames.com 【木头下载】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式