jQuery 之淡入淡出

最新推荐文章于 2022-07-22 10:25:29 发布

启之灵

最新推荐文章于 2022-07-22 10:25:29 发布

阅读量210

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/z_x_Qiang/article/details/85566025

jQuery 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现元素淡入淡出效果的方法。通过改变元素的透明度(opacity)，利用jQuery库中的fadeIn(), fadeOut()和fadeToggle()函数，实现了元素的渐显、渐隐和切换显示状态的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>21_淡入淡出</title>
</head>
<style type="text/css">
    * {
        margin: 0px;
    }

    .div1 {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 50px;
        left: 10px;
        background: red;
    }
</style>

<body>
<button id="btn1">慢慢淡出</button>
<button id="btn2">慢慢淡入</button>
<button id="btn3">淡出/淡入切换</button>

<div class="div1">
</div>

<!--
淡入淡出: 不断改变元素的透明度(opacity)来实现的
1. fadeIn(): 带动画的显示
2. fadeOut(): 带动画隐藏
3. fadeToggle(): 带动画切换显示/隐藏
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
    /*
     需求：
     1. 点击btn1, 慢慢淡出
       * 无参
       * 有参
         * 字符串参数
         * 数字参数
     2. 点击btn3, 慢慢淡入
     3. 点击btn3, 淡出/淡入切换，动画结束时提示“动画结束了”
     */

    var $div1 = $('.div1')

    $('#btn1').click(function () {
        // $div1.fadeOut()
        // $div1.fadeOut('slow')
        $div1.fadeOut(1000, function () {
            alert('动画完成了!!!')
        })
    })

    $('#btn2').click(function () {
        $div1.fadeIn()
    })

    $('#btn3').click(function () {
        $div1.fadeToggle()
    })


</script>
</body>
</html>

jQuery 之 淡入淡出

jQuery 之淡入淡出