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>

jQuery中自定义简单动画的实现的更多相关文章

  1. jQuery 中的简单动画

    制作动画常用方法: show("速度")   显示元素   hide("速度")   隐藏元素   toggle()       切换效果 例如下jQuery代 ...

  2. jQuery中的经典动画

    show()方法和hide()方法是jQuery中的基本动画方法,hide()方法等于将css()方法设置display属性为none.如何让元素动起来呢,我们可以在show和hide里加入slow, ...

  3. jQuery中的渐变动画效果

    jQuery中的渐变动画效果jQuery中的渐变动画效果

  4. jQuery中的综合动画

    所谓综合动画,就是在链式表达式依次执行相关animate函数,其中的参数是以键值对的方式存在的. 如下示例,就展示了一个基本的综合动画. <!DOCTYPE html PUBLIC " ...

  5. bootstrap课程7 jquery中结束之前动画用什么

    bootstrap课程7 jquery中结束之前动画用什么 一.总结 一句话总结:stop()方法.$('.navs').not($('.navs').eq(idx)).stop().hide(100 ...

  6. jQuery中事件与动画

    jQuery中的事件与动画   一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...

  7. jquery中stop停止动画笔记

    jQuery stop() 方法用于停止动画或效果,在它们完成之前. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. 语法: $(selector).stop( ...

  8. jQuery中事件与动画的总结

       1.加载DOM     1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行   $(function(){}) ……:只是 ...

  9. JQuery中一个简单的表单验证的实例

    html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

随机推荐

  1. 图论 BZOJ 3669 [Noi2014]魔法森林

    Description 为了得到书法大家的真传,小E同学下定决心去拜访住在魔法森林中的隐士.魔法森林可以被看成一个包含个N节点M条边的无向图,节点标号为1..N,边标号为1..M.初始时小E同学在号节 ...

  2. Shader Forge 植物摆动

    前日才赞Shader Forge好用,今天就找到了BUG(1.03 版本) -- 获得顶点在物体空间坐标的方法绕来绕去,transform不支持齐次坐标, 不超过3行的shader代码要我出这么一个宏 ...

  3. ssh非交互式密码输入

    ssh登陆不能在命令行中指定密码.sshpass的出现,解决了这一问题.sshpass用于非交互SSH的密码验证,一般用在sh脚本中,无须再次输入密码. 它允许你用 -p 参数指定明文密码,然后直接登 ...

  4. [转载]你需要知道的 16 个 Linux 服务器监控命令

    转载自: 你需要知道的 16 个 Linux 服务器监控命令 如果你想知道你的服务器正在做干什么,你就需要了解一些基本的命令,一旦你精通了这些命令,那你就是一个 专业的 Linux 系统管理员. 有些 ...

  5. hibernate生成查询语句但查不到数据

    hibernate能够生成查询语句 说明它已经进行了查询操作 返回结果数据记录为0  很可能出现的情况 是  :该查询未未访问到指定数据库表. 当使用的数据库为oracle数据库时,你会在bean配置 ...

  6. 通过js子页面回写父页面，改变父页面控件的值

    [原]js中实现子页面向父页面中赋值 (方法一) 父页面:<input  id="input1" type="text"/><a href=& ...

  7. oracle存储过程含参数的插入数据

    create or replace procedure proczipcodebyzipinsert(   i_zipcode  in  zipcode.zip%type,   i_city in z ...

  8. Linux Shell编程学习笔记

    打算在学习过程中将每个写过的程序一个个的往上贴; 2015-07-03 1. 鸟叔第三版13.2.1节“利用日期进行文件的创建” 源代码 #!/bin/bashPATH=/bin:/sbin:/usr ...

  9. POJ 3384 Feng Shui 半平面交

    题目大意:一个人很信"Feng Shui",他要在房间里放两个圆形的地毯. 这两个地毯之间可以重叠,可是不能折叠,也不能伸到房间的外面.求这两个地毯可以覆盖的最大范围.并输出这两个 ...

  10. linux下ssh免密登陆

    如果 有A.B两台主机: 要实现的效果: A主机ssh登录B主机无需输入password: 加密方式选 rsa|dsa均能够.默认rsa 做法: 1.登录A主机 2.ssh-keygen -t [rs ...