zoukankan      html  css  js  c++  java
  • jQuery中自定义简单动画的实现

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
     2 "http://www.w3.org/TR/html4/strict.dtd">
     3 
     4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
     5     <head>
     6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     7         <title>自定义简单动画</title>
     8         <meta name="author" content="Administrator" />
     9         <script type="text/javascript" src="script/jquery-1.12.2.js"></script>
    10         <style type="text/css">
    11             #panel {
    12                 position: absolute;
    13                 width: 100px;
    14                 height: 100px;
    15                 border: 1px solid #0050D0;
    16                 background: #96E555;
    17                 cursor: pointer;
    18             }
    19         </style>
    20         <!-- Date: 2016-03-29 -->
    21     </head>
    22     <body>
    23         <div id="panel"></div>
    24         <script type="text/javascript">
    25             $(function() {
    26                 var flag = true;
    27                 $("#panel").bind("click", (function() {
    28                     if (flag) {
    29                         $(this).animate({
    30                             left : "500px"
    31                         }, 3000);
    32                         flag = false;
    33                     } else {
    34                         $(this).animate({
    35                             left : "10px"
    36                         }, 3000);
    37                         flag = true;
    38                     }
    39                 }));
    40             });
    41         </script>
    42     </body>
    43 </html>
  • 相关阅读:
    洛谷7月月赛 B 题解
    undone
    树剖学习
    关于两周后noip---小计划
    线段树技巧练习--GSS1
    链式前向星存图及注意要点
    错题集合
    树上差分问题
    2020暑假学习内容整理及后续计划
    安利大佬博客
  • 原文地址:https://www.cnblogs.com/Arther-J/p/5332317.html
Copyright © 2011-2022 走看看