<!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. 动态链接库（Dynamic Link Library）

    DLL INTRODUCTION A DLL is a library that contains code and data that can be used by more than one pr ...

  2. Hadoop序列化案例实操

    需求 统计每一个手机号耗费的总上行流量.下行流量.总流量. 输入数据: 1 13736230513 192.196.100.1 www.atguigu.com 2481 24681 200 2 138 ...

  3. 6. Vue - 声明周期

    一.官方vue生命周期流程图 二.vue声明周期介绍 beforeCreate执行时:data和el均未初始化,值为undefined created执行时:Vue 实例观察的数据对象data已经配置 ...

  4. 2019 蓝桥杯国赛 B 组模拟赛 题解

    标签 ok #include<bits/stdc++.h> using namespace std; /* 求阶乘 去除尾部0 每次求阶乘时:结果去除尾0,并对 1e6取余 */ type ...

  5. 19.8.2 luogu 夏令营 游

    人生第一次游记....是在学校机房,在luogu网校,在炎炎夏日,在薯条汉堡,在自己的博客里... 十二天快吗? 刚上课那会真的比较兴奋,把每天的计划都排的满满的,希望这十二天慢点,再慢点,我得好好过 ...

  6. python函数加括号于不加括号的区别

    一.不带括号时,调用的是这个函数本身 ,是整个函数体,是一个函数对象,不须等该函数执行完成二.带括号(参数或者无参),调用的是函数的执行结果,须等该函数执行完成的结果 def test(a): ret ...

  7. day6_异常捕捉

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019/7/11 14:14 # @Author : 大坏男孩 # @File : d ...

  8. jQuery中的工具（十）

    1. jQuery.each(object, [callback]), 通用遍历方法,可用于遍历对象和数组 不同于遍历 jQuery 对象的 $().each() 方法,此方法可用于遍历任何对象.回调 ...

  9. 浅谈C++ STL stack 容器

    浅谈C++ STL stack 容器 本篇随笔简单介绍一下\(C++STL\)中\(stack\)容器的使用方法和常见的使用技巧. stack容器的概念 \(stack\)在英文中是栈的意思.栈是一种 ...

  10. 'GL_EXT_shader_framebuffer_fetch' : extension is not supported

    在使用安卓模拟器加载Flutter应用时, 提示'GL_EXT_shader_framebuffer_fetch' : extension is not supported: D/skia (1404 ...