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 相关文章推荐
Javascript 日期对象Date扩展方法
May 30 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
Vue中props的使用详解
Jun 15 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
JavaScript实现轮播图特效
Apr 10 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
第十二节--类的自动加载
2006/11/16 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
Python多进程编程技术实例分析
2014/09/16 Python
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
python多进程间通信代码实例
2019/09/30 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
pytorch数据预处理错误的解决
2020/02/20 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
优秀社区干部事迹材料
2014/02/03 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang