<!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. Qt入门（14）——父窗口部件和子窗口部件

    这个例子演示了如何创建一个父窗口部件和子窗口部件.我们下面使用一个单一的父窗口部件和一个独立的子窗口部件编写界面.    #include <qvbox.h>我们添加了一个头文件qvbox ...

  2. 【转】Java ConcurrentModificationException异常原因和解决方法

    原文网址:http://www.cnblogs.com/dolphin0520/p/3933551.html Java ConcurrentModificationException异常原因和解决方法 ...

  3. （转载）用PHP正则表达式清除字符串的空白

    (转载)http://www.chinaz.com/program/2009/0220/67569.shtml 我们经常会处理来自用户输入或从数据库中读取的数据,可能在你的字符串中有多余的空白或制表符 ...

  4. 【Android Studio】No JVM installation found

    如果没有配置好JDK的环境变量,启动Android Studio的时候会报错: 请参考我整理的博客文章<JDK的下载.安装和配置>,链接:http://www.cnblogs.com/du ...

  5. C# RAS 非对称加密类 支持长字符串

    /// <summary> /// ikmb@163.com /// </summary> public class MyRAS { /// <summary> / ...

  6. C# 基础小知识之yield 关键字 语法糖

    原文地址:http://www.cnblogs.com/santian/p/4389675.html 对于yield关键字我们首先看一下msdn的解释: 如果你在语句中使用 yield 关键字,则意味 ...

  7. 洛谷2583 地铁间谍 (UVa1025A Spy in the Metro)

    洛谷2583 地铁间谍(UVa1025A Spy in the Metro) 本题地址:http://www.luogu.org/problem/show?pid=2583 题目描述 特工玛利亚被送到 ...

  8. 安装 macbook 双系统( OS X 和 Ubuntu )

    打算 macbook 上面多安装一个 ubuntu 系统来用下.流程大致下面几步: 1. 备份重要资料 2. 划分硬盘区域用于安装 ubuntu 3. 下载 ubuntu ISO 文件,并刻录到 U ...

  9. linux运维社区站点收集

    1, 新世纪linux社区 offical locator: http://www.21ops.com/industry-news/24370.html 2,

  10. PHP实现大文件的上传设置

    打开php.ini,首先找到 ;;;;;;;;;;;;;;;; ; File Uploads ; ;;;;;;;;;;;;;;;; 区域,有影响文件上传的以下几个参数: file_uploads = ...