您的位置：首页 > Web前端 > JQuery

jQuery中自定义简单动画的实现

2016-03-29 11:33 417 查看

原文链接：http://www.cnblogs.com/Arther-J/p/5332317.html

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>

转载于:https://www.cnblogs.com/Arther-J/p/5332317.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航