jQuery-淡入淡出

最新推荐文章于 2023-12-14 19:51:15 发布

零OO

最新推荐文章于 2023-12-14 19:51:15 发布

阅读量246

点赞数

分类专栏：前端文章标签： jquery html 前端

本文链接：https://blog.csdn.net/qq_39111074/article/details/120703843

版权

前端专栏收录该内容

225 篇文章 8 订阅

订阅专栏

本文介绍了如何使用jQuery库中的fadeIn(), fadeOut(), fadeToggle()和fadeTo()方法为网页中的图片创建淡入淡出效果，并展示了如何通过fadeTo()调整图片的透明度。示例中，当鼠标悬停在列表项上时，相邻图片会渐变至半透明状态，移开后恢复全透明。

摘要由CSDN通过智能技术生成

淡入淡出，改变透明度

fadeIn()- - -淡入（显示）
fadeOut()- - -淡出（消失）
fadeToggle()- - -（显示消失切换）
fadeTo()- - -改变透明度; fadeTo(动画时间，要变成的透明度)，透明度0~1

fadeTo使用示例

代码：

<!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>jquery淡入淡出</title>
    <style>
        body {
            background-color: #333;
        }
        ul {
            margin: 100px auto;
            width: 450px;
        }
        li {
            float: left;
            width: 150px;
            height: 150px;
            padding: 10px;
            list-style: none;
            border: 1px solid #ccc;
            box-sizing: border-box;
            background-color: #eee;
        }
        img {
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="js/jQuery.min.js"></script>
</head>
<body>
    <ul>
        <li><img src="images/头像1.jpg" alt=""></li>
        <li><img src="images/头像2.jpg" alt=""></li>
        <li><img src="images/头像3.jpg" alt=""></li>
        <li><img src="images/头像4.jpg" alt=""></li>
        <li><img src="images/小狐狸3.jpg" alt=""></li>
        <li><img src="images/头像5.jpg" alt=""></li>
    </ul>
    <script>
        $(function() {
            $("li").hover(function() {
                $(this).siblings().stop().fadeTo(400, 0.5);
            },function() {
                $(this).siblings().stop().fadeTo(400, 1);
            });
        })
    </script>
</body>
</html>