jQuery的animate
<!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的更多相关文章
- jQuery中Animate进阶用法（一）
jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...
- jQuery的animate方法在IE8下出现小问题
今天修改网站的bug,把网页显示的几张图片给做成左右滑动的动画效果: 由于本身有一个demo可供参考,然后在此基础上进行修改,所以很快就搞定了,然后在chrome,firefox,IE9下分别进行测试 ...
- jQuery的animate在火狐浏览器上不支持backgroundPositionX的解决方法
在网上找的ffSupp.js文件 /** * 自定义backgroundPosition的animate,支持火狐,jQuery1.8以上版本 * @author Meleong * v1.00 */ ...
- jQuery中animate动画第二次点击事件没反应
jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...
- JQuery动画animate的stop方法使用详解
JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...
- jQuery中animate()方法用法实例
本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...
- jQuery中animate()的方法以及$("body").animate({"scrollTop":top})不被Firefox支持问题的解决
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/50846678 本文出自[我是干勾鱼的博客] jQuery中animate()的方 ...
- jquery的animate关于background-position属性
jQuery 的 animate 虽然能直接使用 CSS 的方式来进行动画,但有些属性其实是不支持的,例如:background-position. 谷歌支持 background-position- ...
- 【前端】jQuery的animate在火狐浏览器上不支持backgroundPosition的解决方法
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/4375678.html jQuery的animate是一个非常好用的东东,但某些动画效果支持得不够好,比如back ...
- JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]
1.$和jquery在全局命名空间中定义的唯一两个变量. 2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象. 3.jquery的四种调用方式: <1>传递C ...
随机推荐
- CentOS 7 Apache 绑定域名和网站
CentOS 7 Apache 绑定域名和网站适用场景一台服务器,运行有多个网站,每个网站都希望用户直接通过二级域名来访问,而不是同一个域名通过子目录来访问 配置过程确定自己的 Apache 服务器的 ...
- Day_03
1.指针基本操作 package main import "fmt" func main() { var a int //每个变量有2层含义:变量的内存,变量的地址 fmt.Pri ...
- (五)Amazon Lightsail 部署LAMP应用程序之迁移到Amazon RDS实例
迁移到您的Amazon RDS实例 在某些时候,您的应用程序需求可能需要在 Amazon Lightsail中找不到的功能.幸运的是,将应用程序的一个或所有部分移动到其他AWS服务中非常简单 您将数据 ...
- PHP 安装xdebug
xdebug官网: https://xdebug.org 安装步骤如下: 使用 phpinfo() 打印出PHP相关信息, 全选, 复制 打开 xdebug 网站: https://xdebug.or ...
- 2019面向对象程序设计（java）课程学习进度条
2019面向对象程序设计(java)课程学习进度条 周次 (阅读/编写)代码行数 发布博客量/评论他人博客数量 课余学习时间(小时) 学习收获最大的程序阅读或编程任务 1 20/10 1/0 5 九九 ...
- 浅谈C++ STL vector 容器
浅谈C++ STL vector 容器 本篇随笔简单介绍一下\(C++STL\)中\(vector\)容器的使用方法和常见的使用技巧.\(vector\)容器是\(C++STL\)的一种比较基本的容器 ...
- LG2444/BZOJ2938 「POI2000」病毒 AC自动机
问题描述 LG2444 BZOJ2938 I \(\mathrm{AC}\)自动机 \(\mathrm{AC}\)自动机是一种多模式串匹配算法,本萌新今天刚学了它qwq 约定在构造\(\mathrm{ ...
- 关于npm(一)
npm install X: 把X包安装到node_modules目录中修改package.json运行npm install命令时,不会自动安装X npm install X –save: 把X包安 ...
- [LOJ 2133][UOJ 131][BZOJ 4199][NOI 2015]品酒大会
[LOJ 2133][UOJ 131][BZOJ 4199][NOI 2015]品酒大会 题意 给定一个长度为 \(n\) 的字符串 \(s\), 对于所有 \(r\in[1,n]\) 求出 \(s\ ...
- Paper | BLIND QUALITY ASSESSMENT OF COMPRESSED IMAGES VIA PSEUDO STRUCTURAL SIMILARITY
目录 1. 技术细节 1.1 得到MDI 1.2 判别伪结构,计算伪结构相似性 2. 实验 动机:作者认为,基于块的压缩会产生一种伪结构(pseudo structures),并且不同程度压缩产生的伪 ...