jQuery动画实现闪烁效果

知识点

  1. fadeto()

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            height: 200px;
            width: 200px;
            margin: 200px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        var opacity = 1;
        var timer = setInterval(function () {
            if (opacity <= 0){
                opacity = 1;
            }
            opacity-=0.1;
            $('#box').fadeTo(10,opacity);

        },100);
    });
</script>
</body>
</html>

运行结果

在这里插入图片描述

发布了270 篇原创文章 · 获赞 123 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/KaiSarH/article/details/104580208