JQuery 动画之淡入淡出

原创已于 2023-03-25 12:25:28 修改 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #css #javascript

于 2018-07-26 10:57:49 首次发布

JQuery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的HTML页面实现标题淡入淡出动画效果的方法，并通过jQuery控制动画的开始与停止。此示例利用了Bootstrap框架进行基本布局设置，并借助BootCDN引入必要的JS和CSS文件。

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

需求效果

标题自动淡入淡出，当点击“动画结束时”，标题停止执行动画

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 第一个meta指定编码,IDEA新建默认就有的，与Bootstarp无关
    第二个meta指定IE8强制以低版本进行渲染,与Bootstrap无关
    第三个meta指定Bootstrap以移动设备优先，采用响应式布局-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 除了使用第一种方式，还可以提供官方(BootCDN)的给的CDN加速器引入文件
    同样是css、js文件，只是引入的方式不同而已，如果项目不能连接外网，这种方式是不行的-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">

    <!-- BootCDN提供了很多如JQuery、Chart.js、ECharts.js等等，只需去复制来即可
    BootCDN官网地址：http://www.bootcdn.cn/-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

    <script type="text/javascript">
        $(function () {
            /**对h2执行动画*/
            hFlout($("h2"), 2000, 0, 0);

            /** 停止动画*/
            $("#finish").click(function () {
                $("h2").stop();
            });
        });

        /**
         * 控制某个元素不断的透明度降为0，然后透明度又升为1
         * @param jQueryObj ：待操作的 Jquery对象
         * @param speed ：速度
         * @param opacity ：透明度
         * @param isShow ：1表示显示，0表示隐藏
         */
        function hFlout(jQueryObj, speed, opacity, isShow) {
            jQueryObj.fadeTo(speed, opacity, function () {
                /** 当本次为隐藏时，下次应该为显示*/
                if (isShow == 0) {
                    isShow = 1;
                    opacity = 1;
                } else {
                    /** 当本次为显示时，下次应该为隐藏*/
                    isShow = 0;
                    opacity = 0;
                }
                /**方法回调，循环动画*/
                hFlout(jQueryObj, speed, opacity, isShow);
            });
        }

    </script>

    <title>Bootstrap Study</title>
</head>
<body>
<h2>3 组 1 号 请耐心等待主持人开始......</h2>
<button id="finish">动画结束</button>
</body>
</html>