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 ...
随机推荐
- linux环境下的Oracle部署
一. 环境及相关软件 虚拟机:VMwore Workstation Linux系统:CentOS ORACLE:ORACLE_112030_Linux-x86-64 Xmanger软件 二. 安装 ...
- bayaim_hadoop1_2.2.0伪分布式搭建
------------------bayaim_hadoop1_2.2.0伪分布式搭建_2018年11月06日09:21:46--------------------------------- 1. ...
- HiGV ui代码流程
在海思PDT_Init下有一个这样的函数HI_PDT_UI_Init(): 1. HI_PDT_UI_Init()函数: /*public, it should be called by main() ...
- MySQL 同一Windows系统上安装多个数据库
Step 1:拷贝一份MySQL整个安装文件,并拷贝一份 my.ini 文件放置安装目录下,然后修改以下内容.注意 port 不能设置为默认的3306,这里我们设置为3307端口. basedir=C ...
- [android]system.img文件的打包和解包
1:system.img的两种格式 system2_0.img: Linux rev 1.0 ext4 filesystem data, UUID=57f8f4bc-abf4-655f-bf67-94 ...
- 博客美化——Silence主题皮肤
介绍 一款专注阅读的博客园主题,主要面向于经常混迹 博客园 的朋友.其追求大道至简的终极真理,界面追求简洁.运行追求高效.部署追求简单. 博客皮肤源码地址 预览地址 如何部署.使用皮肤 Silen ...
- 2019面向对象程序设计（java）课程学习进度条
2019面向对象程序设计(java)课程学习进度条 周次 (阅读/编写)代码行数 发布博客量/评论他人博客数量 课余学习时间(小时) 学习收获最大的程序阅读或编程任务 1 20/10 1/0 5 九九 ...
- 史上最全的LaTeX特殊符号语法
史上最全的LaTeX特殊符号语法 运算符 语法 效果 语法 效果 语法 效果 + \(+\) - \(-\) \triangleleft \(\triangleleft\) \pm \(\pm\) \ ...
- 解决4K屏电脑显示问题
在科技飞速发展的年代,4K屏幕不断成为电视.电脑广告的亮点功能,它在显示效果上,确实效果不错,如下图.但是,在电脑上使用是否会影响眼睛的健康问题,还没有权威的论证. 毕竟4k高清屏幕还不是主流,很多软 ...
- systemdump相关
/vendor/sprd/open-source/tools/crashcat sysdump.core.* > dump.bincrash -m phys_base=0x80000000 du ...