JQuery 动画之淡入淡出_jquery淡入淡出动画

作者：Cpp五条 | 2024-06-02 01:50:47

踩

jquery淡入淡出动画

需求效果

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


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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/660371

JQuery 动画之 淡入淡出_jquery淡入淡出动画

需求效果

JQuery 动画之淡入淡出_jquery淡入淡出动画