jQuery简单动画变换效果实例分析


Posted in Javascript onJuly 04, 2016

本文实例讲述了jQuery简单动画变换效果。分享给大家供大家参考,具体如下:

1.效果图如下:

jQuery简单动画变换效果实例分析

2.html代码:

<div id="panel">
  <h5 class="head">什么是jQuery?</h5>
  <div class="content">
    jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
  </div>
</div>

3.jQuery代码:

<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  //toggle:如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
  $("#panel h5.head").toggle(function(){
     //这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素
     $(this).next("div.content").hide();
  },function(){
     //$("p").hide():隐藏所有段落
     $(this).next("div.content").show();
  })
})
</script>
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("#panel").click(function(){
     //以左边和上边为参照物,为标准
     //左边距加500px、左边距向右移动才能增大,向左移动只会减小左边距
     $(this).animate({left: "500px"}, 3000)
        .animate({height: "200px"}, 3000);
  })
})
</script>
</head>
<body>
<div id="panel"></div>
</body>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
详解js的六大数据类型
Dec 27 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
Node.js Streams文件读写操作详解
Jul 04 #Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 #Javascript
jQuery实现的导航下拉菜单效果
Jul 04 #Javascript
表单中单选框添加选项和移除选项
Jul 04 #Javascript
jQuery实现简单倒计时功能的方法
Jul 04 #Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 #Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 #Javascript
You might like
CodeIgniter模板引擎使用实例
2014/07/15 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
php数据序列化测试实例详解
2017/08/12 PHP
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
Python实现单词翻译功能
2017/06/06 Python
详解Python循环作用域与闭包
2019/03/21 Python
Django实现文件上传下载功能
2019/10/06 Python
python实现IOU计算案例
2020/04/12 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
高级护理专业大学生求职信
2013/10/24 职场文书
奉献演讲稿范文
2014/05/21 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
农业项目建议书
2014/08/25 职场文书
党员个人党性分析材料
2014/12/18 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
图文详解nginx日志切割的实现
2022/01/18 Servers
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android