jQuerry实现CSS动画样式跳跃显示

面条有点辣

已于 2022-09-03 22:46:34 修改

阅读量369

点赞数

分类专栏： JavaWeb 文章标签：动画 css css3

于 2022-02-06 15:39:16 首次发布

本文链接：https://blog.csdn.net/qq_42301196/article/details/122798622

版权

JavaWeb jQuery 动画效果点击事件动态加载

关键词由CSDN通过智能技术生成

JavaWeb 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

需求：实现JavaWeb页面上的动画显示效果

展示效果：
在这里插入图片描述

在这里插入图片描述

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态展示动画</title>
    <script type="text/javascript" src="Demo/script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        //添加window.onload动态加载
        $(function (){
            //先为按钮绑定事件
            $("#btn1").click(function (){
                // alert("测试是否绑定成功");
                $("#div01").toggle(1000,myFun);//类似html()等方法是无参数展示，有参数设置，1000是1000毫秒，后面设置函数
            });
            var myFun = function(){
                $("#div01").toggle(1000,myFun);
            }
        });
    </script>
</head>
<body>
    <button id="btn1">动画显示开关按钮</button>
    <div id="div01" style="float:lift;border: 1px solid;background-color: blue;width: 300px;height: 200px;">我是一个跳跃显示的动画</div>
</body>
</html>