- <%@ page contentType="text/html;charset=UTF-8" language="java" %>
- <HTML>
- <head>
- <title>Title</title>
- <script src="js/jquery-3.2.1.min.js"></script>
- <script src="js/jquery-migrate-1.4.1.js"></script>
- <style>
- .ti{
- width: 300px;
- height: 300px;
- background-color: pink;
- }
- </style>
- <script>
- $(function () {
- // 添加按钮的点击属性
- $("#btn1").on("click",function () {
- $(".ti").hide("slow");
- });
- // 取消按钮的点击属性
- $("#btn2").on("click",function () {
- $("#btn1").off("click");
- });
- // 进行切换
- $("#btn3").toggle(function () {
- $(".ti").CSS("backgroundColor","green");
- },function () {
- $(".ti").CSS("backgroundColor","pink");
- });
- });
- </script>
- </head>
- <body>
- <input type="button" value="点击事件" id="btn1"><br><br>
- <input type="button" value="取消点击事件" id="btn2"><br><br>
- <input type="button" value="点击事件生效与取消" id="btn3"><br><br>
- <div class="ti">
进行动画展示
- </div>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3345672.html