jquery动画基础
- 根据id改变字体大小的动画
<div class="speech">样式切换</div>
<div id="switcher">
<button id="switcher-large">click me</button>
</div>var $speech=$("div.speech");
var defaultSize=$speech.css("fontSize");
$("#switcher button").click(function(){
//alert("123")
var num=parseFloat($speech.css("fontSize"),10);
//alert(num); //弹出默认字体大小16
switch(this.id){
case 'switcher-large':
num *= 1.4;
break;
case 'switcher-small':
num /= 1.4;
break;
default:
num=parseFloat(defaultSize,10); }
$speech.animate({fontSize:num+"px"},"slow")
}) - 淡入淡出
$("p").hide();
$("a").click(function(){
$("p").animate({
opacity:'toggle', //淡入淡出的效果
height:'toggle' //由上到下的显示效果
},"slow");
})
jquery动画基础的更多相关文章
- 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效
1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...
- jquery动画,基础以及我发现的新大陆
$.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...
- jQuery动画特效实例教程
本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下: <div class="module"> <div cla ...
- jQuery官方基础教程笔记(转载)
本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...
- jQuery动画使用总结
jQuery动画我用的比较多的仅仅只有show和hide,但是作为一个被我们大多数人所熟知的框架,相信他的动画功能还是比较多样的,这里做个小总结. 1.jQuery animate(),用于创建自定义 ...
- jQuery 动画效果 与 动画队列
基础效果 .hide([duration ] [,easing ] [,complete ]) 用于隐藏元素,没有参数的时候等同于直接设置 display 属性 $('.target').hide() ...
- 【学习笔记】jQuery的基础学习
[学习笔记]jQuery的基础学习 新建 模板 小书匠 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...
- jQuery动画的实现
没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...
- 深入学习jQuery动画控制
× 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...
随机推荐
- 获取Python安装目录
>>> import sys>>> path=sys.executable>>> print (path)C:\Users\jumz-G\AppD ...
- 4Web Service中的几个重要术语
4.1WSDL: web service definition language 直译:Webservice定义语言 1.对应一种类型的文件.wsdl 2.定义了webservice的服务端与客户端应 ...
- js 的闭包
今天看了关于js闭包方面的文章,还是有些云里雾里,对于一个菜鸟来说,学习闭包确实有一定的难度,不说别的,能够在网上找到一篇优秀的是那样的不易. 当然之所以闭包难理解,个人觉得是基础知识掌握的不牢,因为 ...
- curl_init函数用法
使用PHP的cURL库可以简单和有效地去抓网页.你只需要运行一个脚本,然后分析一下你所抓取的网 页,然后就可以以程序的方式得到你想要的数据了.无论是你想从从一个链接上取部分数据,或是取一个XML文件并 ...
- Linux之 sort,uniq,cut,wc命令详解
sort sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出.如果 File 参数指定多个文件,那么 sort 命令将这些文件连接起来,并当作一个文件进行排序. sort语法 ...
- php之XML转数组函数的方法
<?/** * xml2array() will convert the given XML text to an array in the XML structure. * Link: htt ...
- 导出db2数据库的表结构和数据(转载)
对于db2数据库,导入和导出表结构和数据其实很简单,只需要用到db2look和db2move两个命令即可.这两个命令都需要在客户端的命令行处理器 中执行,但对于数据库服务器和客户端不在同一机器上的 ...
- 连续最短路算法(Successive Shortest Path)(最小费用最大流)
#include <cstdio> #include <cstring> #include <queue> #include <vector> #inc ...
- [课程设计]Sprint Two 回顾与总结&发表评论&团队贡献分
[课程设计]Sprint Two 回顾与总结&发表评论&团队贡献分 ● 一.回顾与总结 (1)回顾 燃尽图: Sprint计划-流程图: milestones完成情况如下: (2)总结 ...
- HTML5的数据自动补齐功能
使用datalist元素,HTML5允许使用一组数据来生成自动补齐功能,现在你不需要使用第三方js代码或者类库啦! <input name="frameworks" list ...