温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jQuery怎么实现淡入淡出效果

发布时间:2021-08-09 02:06:42 来源:亿速云 阅读:168 作者:chen 栏目:开发技术

这篇文章主要讲解了“jQuery怎么实现淡入淡出效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jQuery怎么实现淡入淡出效果”吧!

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

  • 淡入 fadeIn([ speed , [easing] , [fn] ]),参数都可不写

  • 淡出 fadeOut([ speed , [easing] , [fn] ]),参数都可不写

  • 淡入淡出切换 fadeToggle([ speed , [easing] , [fn] ]),参数都可不写

  • 修改透明度 fadeTo([ [speed] , opacity , [easing] , [fn] ]),注意,这里速度和透明度一定要写

其中

  • speed是速度

  • easing是切换效果

  • fn是回调函数

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

jQuery怎么实现淡入淡出效果

完整代码如下

<!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" >
 </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>

感谢各位的阅读,以上就是“jQuery怎么实现淡入淡出效果”的内容了,经过本文的学习后,相信大家对jQuery怎么实现淡入淡出效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI