<!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. awk常用命令

    1.统计TCP的连接数量,其中LISTEN多少个,ESTABLISHED多少个. [root@heiniao ~]# netstat -ant Active Internet connections ...

  2. (七)Amazon Lightsail 部署LAMP应用程序之清除已安装服务

    1.删除Lightsail实例 2.删除MySQL数据库 3.删除Amazon RDS数据库 4.删除负载均衡器 5.删除EC2实例 6.删除EC2安全组 7.删除快照

  3. [C11] 推荐系统(Recommender Systems)

    推荐系统(Recommender Systems) 问题阐述(Problem Formulation) 将 推荐系统 纳入这门课程来讲有以下两个原因: 第一.仅仅因为它是机器学习中的一个重要的应用.在 ...

  4. linux-zookeeper-kafka入门

    公告:版权所有,违者必究 1.zookeeper安装 前提:先安装jdk,zookeeper运行依赖于java环境. (1.)下载安装包 http://mirror.bit.edu.cn/apache ...

  5. 训练自己数据-xml文件转voc格式

    首先我们有一堆xml文件 笔者是将mask-rcnn得到的json标注文件转为xml的 批量json转xml方法:https://www.cnblogs.com/bob-jianfeng/p/1112 ...

  6. 使用python发邮件：

    import smtplibfrom email.mime.text import MIMETextfrom email.utils import formataddr#定义发送的内容:msg = M ...

  7. 剑指Offer-2.替换空格(C++/Java)

    题目: 请实现一个函数,将一个字符串中的每个空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 分析: 题意明确,就是将一个字符 ...

  8. git 关联vs code

    {     "window.zoomLevel": 1,     "editor.fontSize": 15,     "gitlens.advanc ...

  9. SVN 中项目名字全是红色 和 文件夹图标上没标记绿钩解决办法

             没有绿色标记卸载Tortoise 小乌龟重装 ! 红色名字是 原来idea当前的project用了版本控制器, 那么建到这个project下面的所有项目就都是加入到版本控制里面的, ...

  10. bzoj2093 Frog

    题目链接 思路 非常有趣的一道题. 先考虑如何找出第K远的位置. 因为给出的序列是单调的,所以对于位置\(i\)的前\(K\)远位置肯定是一个包含位置\(i\)的长度为\(k+1\)的区间.我们用\( ...