时间戳

首页 > 解决方案 > JQuery 列表项fadeIn 和fadeOut

jquery - JQuery 列表项fadeIn 和fadeOut

问题描述

我正在尝试对列表项进行淡入/淡出效果。元素应该快速淡入，但在 3 秒后淡出。我试图弄清楚我的代码有什么问题。

<head>
    <style type="text/css">
        #eyebrowBanner li {
            display: none;
        }
    </style>
    <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>


    <script type="text/javascript">

        $(document).ready(function(){

            function startAnimations() {
                $("#eyebrowBanner li").hide();

                function loop() {
                    var $li = $("#eyebrowBanner li:first-child").fadeIn(400, function () {
                        $li.fadeOut(3000, function () {
                            $li.appendTo('#eyebrowBanner');
                            loop()
                        })
                    });
                }
                loop()
            }

            startAnimations();


        });
    </script>
</head>


<body>

    <ul id="eyeBrowBanner">

        <li>items 1</li>
        <li>items 2</li>
        <li>items 3</li>


    </ul>



</body>

标签： jquerycss

解决方案

推荐阅读