<!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. VSCode 如何同步设置

    微软新推出的 VSCode 是一款开源.轻量.良心的开发工具,一经问世,迅速受到全球广泛开发者的好评与青睐,威风之下有干掉 Sublime Text 的趋势.然而有不少 VSCode 使用者吐槽其不能 ...

  2. 7.2 Spark Streaming

    一.Spark Streaming设计 Spark Streaming可整合多种输入数据源,如Kafka.Flume.HDFS,甚至是普通的TCP套接字.经处理后的数据可存储至文件系统.数据库,或显示 ...

  3. c# 第27节 结构、枚举

    本节内容: 1:为什么要有结构 2:结构体的声明和使用 3:为什么要有枚举.常识大考验 4:枚举的声明 5:枚举的使用 6:枚举的各种转换 1:为什么要有结构 2:结构体的声明和使用 结构的声明位置: ...

  4. 【第4题】 什么是https

    https是基于http和SSL/TLS实现的一个协议,他可以保证在网络上传输的数据都是加密的,从而保证数据安全. 接下来我们从http协议开始,提出想法并逐步进行分析,最终实现Https. 1. h ...

  5. pycharm 快速启动Django项目和python程序

    Django 设置 *.py

  6. SpringCloud琐碎内容

    SpringCloud提供了很多监控端点,可以使用http://{ip}:{port}/{endpoint}得形式来访问这些端点,从而了解应用程序的运行状况. Actuator提供的端点,如表3-2所 ...

  7. [C3W1] Structuring Machine Learning Projects - ML Strategy 1

    第一周:机器学习策略(1)(ML Strategy(1)) 为什么是ML策略?(Why ML Strategy) 大家好,欢迎收听本课,如何构建你的机器学习项目也就是说机器学习的策略.我希望通过这门课 ...

  8. C++ class外的==重载，判断相等，测试等于，重载示例。二元操作符

    #include <iostream> // overloading "operator == " outside class // == 是二元操作符 /////// ...

  9. fis3 相关

    fis3 静态资源存放 windows: C:\Users\Administrator\AppData\Local\.fis3-tmp

  10. CSP-J&S2019第一轮认证游记

    Day-0 晚上和高一大佬BH聊了聊,感觉大佬第一次参加比赛毕竟还是有点慌QAQ,毕竟我这么菜的人都没慌过. 做了一套模拟题,用45分钟瞎打的提高组卷子得了62分,还不错,正式比赛用2个小时好好答的话 ...