jQuery实现动画效果的简单实例


Posted in Javascript onJanuary 27, 2014

一、需求原因
目前jQuery已经是一个比较成熟的框架了,而且基于他的插件也有上百种,本例我手动用jQuery实现一个动画效果的例子。

二、具体实现

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>jQuery实现动画效果</title>
<script language="JavaScript"src="../jQuery/jquery-1.7.1.min.js"></script>
<style type="text/css">
     #test {
         position:relative;
         width:100px;
         height:100px;
         border:1px solid #0050d0;
         background:#96e555;
          cursor:pointer;
     }
</style>
<script type="text/javascript">
     $(function(){
         $("#test").css("optcity","0.5");//设置不透明
         $("#test").click(function(){
              $(this).animate({left:"400px",height:"200px",opacity:"1"},300)
                      .animate({top:"200px",width:"200px"},300)
                      .fadeOut("slow");
         });
     });
</script>
</head>
<body>
     <div id="test"></div>
</body>
</html>

三、运行结果

jQuery实现动画效果的简单实例

Javascript 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
详解如何修改 node_modules 里的文件
May 22 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 #Javascript
js修改原型的属性使用介绍
Jan 26 #Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 #Javascript
JS批量修改PS中图层名称的方法
Jan 26 #Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 #Javascript
购物车选中得到价格实现示例
Jan 26 #Javascript
动态添加option及createElement使用示例
Jan 26 #Javascript
You might like
PHP中,文件上传
2006/12/06 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
专科文秘应届生求职信
2013/11/18 职场文书
运动会广播稿200米
2014/01/27 职场文书
四个太阳教学反思
2014/02/01 职场文书
私人委托书格式
2014/09/10 职场文书
上课迟到检讨书
2015/05/06 职场文书
导游词之吉林花园山
2019/10/17 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python