<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    img { position: relative; }

  </style>

</head>

<body>

<img id="s1" src="img/star.png"><br/>

<img id="s2" src="img/star.png"><br/>

<img id="s3" src="img/star.png"><br/>

<img id="s4" src="img/star.png"><br/>

<script src="js/jquery-1.11.3.js"></script>

<script>

  /*

  s1在屏幕左上角的小星星， 点击后从左移动到屏幕右边

  s2在屏幕左上角的小星星，点击后从左移动到屏幕右边，再移动到下边——走直角

  s3在屏幕左上角的小星星，点击后从左上角移动到屏幕右下边，走斜线

  s4点击小星星，变大、变淡....  直至消失

*/

$("#s1").click(function(){

  var $s1=$(this);

  if(!$s1.is(":animated"))

  $s1.animate({left:300},2000);

  else $s1.stop();

})

$("#s2").click(function(){//这里有队列，先左后下

 var $s2=$(this);

  if(!$s2.is(":animated"))

    $s2.animate({left:300},1000).animate({top:300},1000);

  else $s2.stop(true);

})

$("#s3").click(function(){

  var $s1=$(this);

  if(!$s1.is(":animated"))

     $s1.animate({left:300,top:300},2000);

    else $s1.stop();

})

$("#s4").click(function(){

  $(this).animate({

  width:200,

  height:200,

  //这里是为了让小星星以中心为原点开始消失，所以要把星重新摆正

  marginLeft:-36,

  marginTop:-36,

  opacity:0

  },2000,function(){$(this).hide();});

})

</script>

</body>

</html>

jQuery的animate的更多相关文章

  1. jQuery中Animate进阶用法（一）

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

  2. jQuery的animate方法在IE8下出现小问题

    今天修改网站的bug,把网页显示的几张图片给做成左右滑动的动画效果: 由于本身有一个demo可供参考,然后在此基础上进行修改,所以很快就搞定了,然后在chrome,firefox,IE9下分别进行测试 ...

  3. jQuery的animate在火狐浏览器上不支持backgroundPositionX的解决方法

    在网上找的ffSupp.js文件 /** * 自定义backgroundPosition的animate,支持火狐,jQuery1.8以上版本 * @author Meleong * v1.00 */ ...

  4. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  5. JQuery动画animate的stop方法使用详解

    JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...

  6. jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...

  7. jQuery中animate()的方法以及$(&quot;body&quot;).animate({&quot;scrollTop&quot;:top})不被Firefox支持问题的解决

    转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/50846678 本文出自[我是干勾鱼的博客] jQuery中animate()的方 ...

  8. jquery的animate关于background-position属性

    jQuery 的 animate 虽然能直接使用 CSS 的方式来进行动画,但有些属性其实是不支持的,例如:background-position. 谷歌支持 background-position- ...

  9. 【前端】jQuery的animate在火狐浏览器上不支持backgroundPosition的解决方法

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/4375678.html jQuery的animate是一个非常好用的东东,但某些动画效果支持得不够好,比如back ...

  10. JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

    1.$和jquery在全局命名空间中定义的唯一两个变量.   2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象.   3.jquery的四种调用方式:     <1>传递C ...

随机推荐

  1. [日常] Redis中set集合的使用思考

    公司部门同事有个需求,就是需要把当前另一个部门a中存储的数据全部导出来,自己当前业务b的数据全部导出来,两个要取一下差集,把a中存在,b中不存在的记下来,要去调用某接口把对应的文件删除.这个我感觉可以 ...

  2. 【cf915】E. Physical Education Lessons（线段树）

    传送门 简单的线段树区间修改区间查询,但是因为数据范围过大,所以采用动态开点的方法(注意一下空间问题). 也可以直接对询问区间的端点离散化然后建树,这种方法时间复杂度和空间复杂度都比较优秀. 给出动态 ...

  3. 动态添加Redis密码认证的方法

    1.定制jedis 对redis返回的错误的处理,做两处修改: 忽略 (error) ERR Client sent AUTH, but no password is set.使配置了密码的jedis ...

  4. JAVA字符串转换整数

    public class compint { /** * @param args */ public static void main(String[] args) { // TODO Auto-ge ...

  5. day46_9_5前端（3）

    一.调节长宽. 在css中可以对块级标签设置长和宽,但是对行内标签无效,其属性如下: 1.height:80px 高度. 2.width:80px 宽度. 二.字体属性. 设置一个标签中的字体.比如黑 ...

  6. STS(Spring Tool Suite)中.yml文件的语法颜色设置

    点击Window --> 最下面点击 YEdit Preferences --> 点击 color Preferences 弹出以下对话框进行修改颜色

  7. [PHP] 阿里云 Composer 全量镜像

    阿里云 Composer 全量镜像 镜像地址:https://mirrors.aliyun.com/composer/

  8. 【正则】day01

    正则表达式一.概述    验证    网络爬虫. 概念:    具有语法格式的字符串. 函数    PCRE    1.perl语言正则语法兼容.(java c)    2.速度快,效率高.    P ...

  9. 弄明白kubernetes中的“三种IP”

    Node IP : Node节点的IP地址 Pod IP:Pod的IP地址 Cluster IP : Service 的IP地址 首先,Node IP是Kubernetes集群中每个节点(服务器)物理 ...

  10. Java 基础系列：不变性

    1.1 定义 不可变类(Immutable Objects):当类的实例一经创建,其内容便不可改变,即无法修改其成员变量. 可变类(Mutable Objects):类的实例创建后,可以修改其内容. ...