1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.          <title>jQuery动画特效</title>
  6.          <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
  7.          <style>
  8.          div{
  9.              position:absolute;
  10.              top:50px;
  11.              left:200px;
  12.              height:50px;
  13.              width:50px;
  14.              border:1px solid red;
  15.          }
  16.          </style>
  17.      </head>
  18.      <body>
  19.          <div></div>
  20.          <input id="leftmove" type="button" value="左移"/>
  21.          <input id="rightmove" type="button" value="右移"/>
  22.          <script type="text/javascript">
  23.              $(function(){
  24.                  $ltime=;
  25.                  $rtime=;
  26.                 $("#leftmove").bind("click",function(){//绑定元素事件
  27.                     $ltime++;
  28.                     $("div").animate({//调用animate制作移动动画
  29.                         left:'-=50px'
  30.                     },,function(){
  31.                         $("div").html("左移"+$ltime+"次!");
  32.                     });
  33.                 });
  34.                 $("#rightmove").bind("click",function(){
  35.                     $rtime++;
  36.                     $("div").animate({
  37.                         left:'+=50px'
  38.                     },,function(){
  39.                         $("div").html("右移"+$rtime+"次!");
  40.                     });
  41.                 });
  42.              });
  43.          </script>
  44.      </body>
  45.  </html>

jQuery动画效果实现的更多相关文章

  1. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  2. jquery动画效果---animate()--滚屏

    jquery动画效果---animate()方法---W3school

  3. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  4. js进阶 13-6 jquery动画效果相关常用函数有哪些

    js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...

  5. jQuery动画效果animate和scrollTop结合使用实例

    CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color ...

  6. jquery 动画效果插件

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...

  7. 40个超酷的jQuery动画效果教程

    自从出现,jQuery就在web领域就引起了轰动,现在它已经成为Web动画效果的最佳解决方案之一.jQuery提供了良好的交叉浏览器支持,并且轻便易用.现在,jQuery在定义和控制小型的Web动画诸 ...

  8. jquery动画效果中，避免持续反应用户的连续点击

    一.某些动画效果中,避免持续连续反应用户的连续点击(这标题真不好描述) 意思就是指用户点击速度很快,完成一次效果的时间不能很快结束的话,就会出现用户不点击了,效果还在持续.看下面例子就明白了,手风琴效 ...

  9. jQuery自学笔记（三）：jQuery动画效果

    jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector ...

  10. 一款简洁而强大的前端框架JQUery—动画效果及剪刀石头布小游戏

    jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画 ...

随机推荐

  1. 前端自动化构建工具——gulp

    gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...

  2. arcobject 相关

    要素添加: http://resources.esri.com/help/9.3/arcgisengine/arcobjects/esriGeoDatabase/IFeatureClass.Inser ...

  3. php随机验证码

    今天同学问我,用php怎么写验证码,由于是新手所以花了半天的时间才完成.而且功能很是简单呵呵.今天本来打算写session和cookie的看来是要明天了. <?php $image_width= ...

  4. selenium-python iframe用法

    易迅的登录方法,因为页面有很多iframe的内置框架,需要先逐级定位到登录元素所在的iframe才行 使用方法switch_to_frame('id-name') from selenium impo ...

  5. [转]null和""以及==与equals的区别

    String str1 = null; str引用为空 String str2 = ""; str引用为空串 直接点就是null没有分配内存空间,而""分配了内 ...

  6. linux 非缓冲io笔记

    简介 在linux中,打开的的文件(可输入输出)标识就是一个int值,如下面的三个标准输入输出 STDIN_FILENO/STDOUT_FILENO/STDERR_FILENO这三个是标准输入输出,对 ...

  7. ActiveMQ之MessageListener

    消息的消费者接收消息可以采用两种方式: 1.consumer.receive()或 consumer.receive(int timeout); 2.注册一个MessageListener. 采用第一 ...

  8. ASP.NET从数据库中取出数据，有数据的复选框为选中

    在KS系统中在更新菜单的时候,当查出菜单的时候要查出菜单下面已经有了哪些界面了我用了一下的方法弄的.代码如下: 界面代码: <%@ Page Language="C#" Au ...

  9. MySQL 简洁连接数据库方式

    OS  :   CentOS 6.3 DB  :  5.5.14 MySQL连接数据库的方式很多: 1.[root@db01 bin]# ./mysql -uroot -p 2.[root@db01 ...

  10. PropertyDrawer 自定义属性绘图

    public class PlayerAttributeExample : MonoBehaviour { //无滑块的属性 ; //特性限定,有滑块 [Range(, )] ; } Range特性的 ...