<!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. Python中 if __name__ == '__main__' 的作用

    Python文件可以直接运行,也可以 import 到其它文件中使用 if __name__ == '__main__' 就是控制代码在这两种情况下的执行过程 每个Python模块都包含内置变量,直接 ...

  2. 网络流(2)——用Ford-Fullkerson算法寻找最大流

    寻找最大流 在大规模战争中,后勤补给是重中之重,为了尽最大可能满足前线的物资消耗,后勤部队必然要充分利用每条运输网,这正好可以用最大流模型解决.如何寻找一个复杂网络上的最大流呢? 直觉上的方案 一种直 ...

  3. Html学习之十四（阴影文字的设计）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 【转】阿里云部署java web项目

    主要步骤:1. 购买阿里云服务器2. 远程连接3. 在云服务器上配javaweb环境:jdk,tomcat,MySQL4. 将项目的war文件放到Tomcat下关于云服务器ECS:如果还想在买服务器之 ...

  5. Markdown & LaTex 常用语法

    目录 blog 的目录 博客园自带目录 用 javascript 自定义目录 主标题 副标题 h1,一级标题 h2,二级标题 h3,三级标题 注释 常用的符号及文本形式 如果你想在markdown中文 ...

  6. 《阿里B2B技术架构演进详解》----阅读

    B2B(Business To Business)是指一个市场的领域的一种,是企业对企业之间的营销关系.先来总结一下阿里B2B共分为三个阶段: 第一阶段,建立信息网站提供信息和营销服务平台,让买家更加 ...

  7. Fink| API| Time与Window

    1. Flink 批处理Api 1.1 Source Flink+kafka是如何实现exactly-once语义的 Flink通过checkpoint来保存数据是否处理完成的状态: 有JobMana ...

  8. Note | Ubuntu

    目录 0. 教程 1. 安装 2. 系统 0. 教程 <Linux就该这么学>:https://www.cnblogs.com/RyanXing/p/9462850.html 1. 安装 ...

  9. Oracle 存储过程包（Package、Package Body）

    初出茅庐,不知原来存储过程还可以写得如此复杂,而且还竟然可以调试! 好吧,得整理一下存储过程的一些语法,以备以后用到时可以查阅. 使用数据库:Oracle 数据库工具:PL/SQL Developer ...

  10. python运维开发常用模块(6)发送电子邮件模块smtplib

    1.模块常用方法 SMTP类定义:smtplib.SMTP([host[,port[,local_hostname[, timeout]]]]),作为SMTP的构造函数,功能是与smtp服务器建立连接 ...