<!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <title>jQuery动画特效</title>

         <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

         <style>

         div{

             position:absolute;

             top:50px;

             left:200px;

             height:50px;

             width:50px;

             border:1px solid red;

         }

         </style>

     </head>

     <body>

         <div></div>

         <input id="leftmove" type="button" value="左移"/>

         <input id="rightmove" type="button" value="右移"/>

         <script type="text/javascript">

             $(function(){

                 $ltime=;

                 $rtime=;

                $("#leftmove").bind("click",function(){//绑定元素事件

                    $ltime++;

                    $("div").animate({//调用animate制作移动动画

                        left:'-=50px'

                    },,function(){

                        $("div").html("左移"+$ltime+"次!");

                    });

                });

                $("#rightmove").bind("click",function(){

                    $rtime++;

                    $("div").animate({

                        left:'+=50px'

                    },,function(){

                        $("div").html("右移"+$rtime+"次!");

                    });

                });

             });

         </script>

     </body>

 </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. ASP.ENT Core Linux 下 为 donet创建守护进程（转载）

    原文地址:http://www.cnblogs.com/savorboard/p/dotnetcore-supervisor.html 前言 在上篇文章中介绍了如何在 Docker 容器中部署我们的 ...

  2. 分享：linux下apache服务器的配置和管理

    linux下apache服务器的配置和管理. 一.两个重要目录: Apache有两个重要的目录:1.配置目录/etc/httpd/conf:2.文档目录/var/www: 二.两种配置模式: Apac ...

  3. mslookup

    Microsoft Windows [版本 6.1.7601]版权所有 (c) 2009 Microsoft Corporation.保留所有权利. C:\Users\Administrator> ...

  4. 笔记 php.ini配置文件中magic_quotes_gpc, magic_quotes_runtime的作用是什么？应该开启还是关闭？

    默认情况下,PHP 指令 magic_quotes_gpc 为 on,对所有的 GET.POST 和 COOKIE 数据自动运行 addslashes().不要对已经被 magic_quotes_gp ...

  5. SQLServer处理亿万级别的数据的优化措施

    如何在SQLServer中处理亿万级别的数据(历史数据),可以按以下方面进行: 去掉表的所有索引 用SqlBulkCopy进行插入 分表或者分区,减少每个表的数据总量 在某个表完全写完之后再建立索引 ...

  6. windows创建桌面快捷方式的VBA脚本

    Dim wShell, oShortcut    'Dim strDesktop$ ' 为了与VBS兼容,    Dim strDesktop    ' 这里改写一下,测试通过...    Set w ...

  7. C# 链接Sql和Access数据库语句

    1.sql数据库: 1.1.链接数据语句:server=localhost;database=Data; uid=sa;pwd=123; 或 Data Source=localhost;DataBas ...

  8. SVN四部曲之SVN简单使用教程入门

    1.        签出源代码到本机 在本机创建文件夹StartKit,右键点击Checkout,弹出如下图的窗体: 2.        2 在上图中URL of Repository:下的文本框中输 ...

  9. vim中执行shell命令小结

    vim中执行shell命令,有以下几种形式 1):!command 不退出vim,并执行shell命令command,将命令输出显示在vim的命令区域,不会改变当前编辑的文件的内容 例如:!ls -l ...

  10. uImage、zImage、bzImage、vlinzx区别

    在网络中,不少服务器采用的是Linux系统.为了进一步提高服务器的性能,可能需要根 据特定的硬件及需求重新编译Linux内核.编译Linux 内核,需要根据规定的步骤进行,编译内核过程中涉及到几个重要 ...