此代码必须一一显示并消失

时间:2019-06-15 19:18:54

标签: jquery animation

此代码必须显示一个div,该div会显示然后消失,然后再显示另一个相同的东西

这是我的html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery Effects</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: teal;
            text-align: center;
            float: left;
            margin: 20px;
            color: aquamarine;
        }
        body{
            text-align: center;
        }
        button{
            margin-top: 80px;
            border: 2px solid blue;
            outline: none;
            background: white;
            width: 100px;
            height: 50px;
            border-radius: 50%;
            color: blue;
            transition: all 500ms;
        }
        button:hover{
            color: white;
            background: blue;
        }
    </style>
</head>

<body>
    <div style="margin-left: 602px;">Please Don't fade me out</div>
    <div>I am begging you</div>
    <div style="margin-right: 602px;">Help Help Help!!!</div>
    <!-- <button>CLICK ME</button> -->
    <script src="aee.js"></script>
</body>

</html>

这是我的javascript文件

setInterval(function () {
    for (var i = 0; i < $("div").length; i++) {
        for (var e = 0; e < 2; e++) {
            var u = "div:nth-of-type(" + (i + 1) + ")";
            $(u).slideToggle(1000);
        }
    }
}, 500);

据我所知,这应该显示然后消失,然后再出现另一件事。您如何看待这段代码?

如果您还有另一种方法可以告诉我?

0 个答案:

没有答案