<!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. Android 开发无线调试

    在进行android开发的时候有时候总是连接不上设备,因为设备的USB进行频繁插拔之后会导致一定的损坏.所以在设备已经无法利用数据线进行连接开发工具的时候就需要有那么一个功能,那就是无线调试,是不是感 ...

  2. 动态规划(水题)：COGS 261. [NOI1997] 积木游戏

    261. [NOI1997] 积木游戏 ★★   输入文件:buildinggame.in   输出文件:buildinggame.out   简单对比时间限制:1 s   内存限制:128 MB S ...

  3. Vagrant虚拟机的配置管理

    Vagrant虚拟机的配置管理 一.shell配置管理 二.使用Puppet进行配置管理 三.案例 Apache服务器的自动配置 3.1 shell配置管理 3.2 puppet配置管理 ps:由于最 ...

  4. SRM 600(1-250pt,500pt)

    DIV1 250pt 题意:给定一个vector<int>A,若能从里面选出一些数,使得他们按位或的值为x,则称x为吉利数.给定k,问最少要从A里面去掉多少个数,才能使k变为不吉利数. 解 ...

  5. POJ 2057 The Lost House

    题意:一只蜗牛,它的房子在树上的某个叶子节点上,它要从树的根节点出发,寻找自己的房子.树的任意两个节点的距离为1,房子出现在每个叶子节点上的可能性一样.有的节点上有虫子,如果有虫子,虫子会告诉蜗牛它的 ...

  6. J - A Bug's Life - poj2492

    这个题目很有意思啊,有一些bug生物(肯定是程序员养的),有人观察他们的生活习惯,观察他们之间是否有同性恋关系,比如ab发生关系,bc发生关系,ab发生关系...产生了同性恋了,你需要判断一下这种关系 ...

  7. linux 挂载ISO

    首先,将作为源的iso的挂载到系统上. 代码如下: mount -o loop /xxx/xxx.iso /mnt/iso/ 其中/mnt/iso是事先在本地建立的文件夹. 然后将文件iso.repo ...

  8. PHP学习之［第04讲］PHP5.4 运算符、流程控制

    一.运算符: 1.算数运算符:+.-.*./.%.++.-- 2.字符串运算符: <?php $str="string php100"; echo $str."we ...

  9. jquery常用见的正则表达式

    quickexpr = /^(?:[^<]*(<[ww]+>)[^>]*$|#([w-]+)$)/  (?:…)表示是一个非捕获型 [^<]表示是以"<& ...

  10. Windows的应用管理工具 PortableApps，Chocolatey和Ninite

    以前为了让我的firefox变成portable的,我使用了PortableApps,它不只是做软件的绿色版,而且也是一个软件的管理平台,可以通过它来管理软件的更新,挺方便的. 前段时间试用Scrip ...