<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

     <head>

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

         <title>自定义简单动画</title>

         <meta name="author" content="Administrator" />

         <script type="text/javascript" src="script/jquery-1.12.2.js"></script>

         <style type="text/css">

             #panel {

                 position: absolute;

                 width: 100px;

                 height: 100px;

                 border: 1px solid #0050D0;

                 background: #96E555;

                 cursor: pointer;

             }

         </style>

         <!-- Date: 2016-03-29 -->

     </head>

     <body>

         <div id="panel"></div>

         <script type="text/javascript">

             $(function() {

                 var flag = true;

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

                     if (flag) {

                         $(this).animate({

                             left : "500px"

                         }, 3000);

                         flag = false;

                     } else {

                         $(this).animate({

                             left : "10px"

                         }, 3000);

                         flag = true;

                     }

                 }));

             });

         </script>

     </body>

 </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. linux下的webserver BOA及CGIC库的使用指南（转帖）

    我把网页挂载到nfs 下面的文件中(需要新建一个文件www ),不过这样很方便! 安装过程 ====================================================== ...

  2. DateDiff 函数，用生日获得年龄

    一:截图 二:代码 using System; using System.Collections.Generic; using System.ComponentModel; using System. ...

  3. eucalyptus的网络模式

    总共有四种网络模式,默认采用的是system模式 SYSTEM Mode 最简单的网络配置.Eucalyptus分配mac地址,使用 Xen Bridge,配合已有的 DHCP DHCP 來分配 IP ...

  4. 启动tomcat时报classpath not found

    启动tomcat时报classpath  not found 原因是缺包,首先查看tomcat安装地址,然后找到webapps目录下,找到该项目,看lib下是否缺包,不能单纯的看项目下是否缺包.

  5. Html中src、href的相对路径与绝对路径

    What is a path? Why is this something developers should care about? A path is simply the location of ...

  6. bzoj2631: tree lct

    要打mul和add的lct 50000+的mod用unsigned int好了TAT (坑爹没打pc('\n');(静态)调了好久,样例竟然只输出一个,orz,也不提示PE T_T) #include ...

  7. Dump 文件生成与分析

    近期两天因为项目的须要,研究了一下Dump文件相关的知识,今天做一个小节(因为研究不久而且第一次写blog,希望网友们看到不要见笑). Dump文件是进程的内存镜像.能够把程序的运行状态通过调试器保存 ...

  8. C primer plus 读书笔记第十一章

    本章标题是字符串和字符串函数.主要是了解和字符串有关的函数. 1.字符串表示和字符串I/O 主要内容:字符串常量和字符串数组的初始化,对比了指针和字符串. 其中要注意的是,数组初始化是从静态存储区把一 ...

  9. Java数学表示式解析工具- jeval

    这个包能够为我们提高高效的数学表达式计算. 举个样例:这个是我们策划给出的游戏命中率的一部份计算公式 是否命中=a命中率 – (b等级 – a等级) * (命中系数(6)* b闪避率 / 100)+3 ...

  10. 关于cocostudio加载UI json CCUIHELPER未声明问题

    查看官方的文档,在文档的最后添加了如何加载项目.如下代码: UILayer* ul =UILayer::create(); ul->addWidget(CCUIHELPER->create ...