0

0

jquery中动态效果小结_jquery

php中文网

php中文网

发布时间:2016-05-16 18:13:38

|

1143人浏览过

|

来源于php中文网

原创

动画效果,如果综合使用,还能使用简单的代码简单实现jquery的各种插件的效果

本文参考《《浅谈jquery》一书,加以整理,并结合自己的实际经验而成,可以看做一个 学习手册吧
编辑的时候代码全乱了,重新整理了下,可能代码格式还是有点乱,请见谅
显示(show),隐藏(hide)与组合(toggle)效果
1.show(speed,callback);
说明:这个方法可以显示隐藏的元素,其中参数也缺省,即写成show()这种形式
speed ---指定显示的速度 有3个参数可以选择 slow ,normal,fast,也可以自己指定数字(单位:毫秒)
callback---回调函数
下面是一个简单的例子

复制代码 代码如下:

var callback=function(){ //alert("我是回调函数");
}
var f1=function(){
// $("#t1").show(); 参数缺省
// $("#t1").show("fast",callback); 显示速度为fast方式
$("#t1").show(3000,callback);//自定义显示速度 3000毫秒
};
$("#b1").click(f1);

Html代码
复制代码 代码如下:



2 hidden(speed,callback);
说明:相反与show方法,用于隐藏元素,参数与show相同,请参考3.1
下面的例子是点击一个按钮,隐藏显示的div
复制代码 代码如下:

var callback=function(){ //alert("我是回调函数");
}
var f1=function(){
// $("#t1").hide(); 参数缺省
// $("#t1").hide("fast",callback); 显示速度为fast方式
$("#t1").hide(3000,callback);//自定义显示速度 3000毫秒
}; $("#b1").click(f1);

Html代码
复制代码 代码如下:

dd


3 toggle(speed,callback)
说明:这个可以理解为show()与hide()方法的结合体,轮换执行show()与hide()
比如:页面有一个隐藏的元素,第一次执行toggle(),显示元素,第二次执行,隐藏元素,第三次则又显示元素。。。
参数与3.1,相同
复制代码 代码如下:

var callback=function(){ //alert("我是回调函数");
}
var f1=function(){
//$("#t1").toggle(); // 参数缺省
//$("#t1").toggle("fast",callback); //显示速度为fast方式
$("#t1").toggle(3000,callback);
};
$("#b1").click(f1);


Html代码
复制代码 代码如下:

dd


二.元素的滑动效果(向下展开,向上收缩)
1.slideDown(speed,[callback]);
说明:改变对象的height以实现向下展开的动画效果,常用与显示隐藏的元素
复制代码 代码如下:

var callback=function(){ //alert("我是回调函数"); }
var f1=function(){
//$("#t1").slideDown(); // 参数缺省
//$("#t1").slideDown("fast",callback); //显示速度为fast方式
$("#t1").slideDown(1000,callback);
};
$("#b1").click(f1);

Html代码
复制代码 代码如下:

dd


2.slideUp(speed,[callback]););

说明:改变对象的height以实现向上展开的动画效果,常用隐藏显示的元素
复制代码 代码如下:

var callback=function(){
//alert("我是回调函数");
}
var f1=function(){
//$("#t1").slideUp();
// 参数缺省 //$("#t1").slideUp("fast",callback); //显示速度为fast方式
$("#t1").slideUp(1000,callback);
};
$("#b1").click(f1);
dd


3.slideToggle(speed,[callback]););

说明:可以说是以上2个方法的综合体,可替代toggle();如果你是仔细看了上面的几个方法介绍,就应该知道怎么用了,其实这几个方法的用法和参数都是相同的,只是展现的形式不同,例子我就不写了吧

三 元素的淡入淡出效果

1.fadeIn(speed,[callback]); 

说明:实现淡出效果,用于显示隐藏元素

2.fadeOut(speed,[callback]);

说明:实现淡入效果,用于隐藏显示的元素

 

奥硕企业网站管理系统终身免费版精简版1.0 build 090625
奥硕企业网站管理系统终身免费版精简版1.0 build 090625

奥硕企业网站管理系统具有一下特色功能1、双语双模(中英文采用单独模板设计,可制作中英文不同样式的网站)2、在线编辑JS动态菜单支持下拉效果,同时生成中文,英文,静态3个JS菜单3、在线制作并调用FLASH展示动画4、自动生成缩略图,可以自由设置宽高5、图片批量加水印,可以自由设置字体,大小,样式,水印位置(同时支持文字或图片类型水印)6、强大的标签式数据调用,可以调用(新闻,产品,下载,招聘)支持

下载

3,fadeTo(speed,opactity,callback);

说明:该方法用于更改显示元素的透明度

参数:speed,callback于上面介绍的其他动画方法参数相同,opactity参数表示透明度,取值范围为0-1

复制代码 代码如下:

var callback=function(){
//alert("我是回调函数");
} ;
var f1=function(){ $("#t1").fadeTo(1000,0.3,callback);//0.3为透明度30%
};
$("#b1").click(f1);
dd


四.自定义动画

 

说明:从前面一,二,三可以看到,元素的显示有show,slideDown,fadeIn,隐藏有hide,slideUp,fadeOut的动画效果

,组合效果toggle,slideToggle,更改透明度效果fadeTo,实际需要中我们还可以自定义一些动画效果

 

自定义动画使用方法:animate(params,speed,callback);

 参数说明:params---一组包含作为动画属性和最终值哦样式属性和其值的集合

                  speed----同前面介绍方法中的speed属性

                 callback---回调函数

       注意:params的样式属性必须书写成驼峰形式,即比如margin-left应该些微marginLeft的形式

下面是一个例子

复制代码 代码如下:

var callback=function(){
//alert("我是回调函数");
} ;
var par={ height:"70%" };
var f1=function(){
$("#t1").animate(par,1000,callback);
};

$("#b1").click(f1);

Html代码
复制代码 代码如下:

dd

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
java连接字符串方法汇总
java连接字符串方法汇总

本专题整合了java连接字符串教程合集,阅读专题下面的文章了解更多详细操作。

7

2026.02.05

java中fail含义
java中fail含义

本专题整合了java中fail的含义、作用相关内容,阅读专题下面的文章了解更多详细内容。

8

2026.02.05

控制反转和依赖注入区别
控制反转和依赖注入区别

本专题整合了控制反转和依赖注入区别、解释、实现方法相关内容。阅读专题下面的文章了解更多详细教程。

11

2026.02.05

钉钉脑图插图教程合集
钉钉脑图插图教程合集

本专题整合了钉钉脑图怎么插入图片、钉钉脑图怎么用相关教程,阅读专题下面的文章了解更多详细内容。

24

2026.02.05

python截取字符串方法汇总
python截取字符串方法汇总

本专题整合了python截取字符串方法相关合集,阅读专题下面的文章了解更多详细内容。

2

2026.02.05

Java截取字符串方法合集
Java截取字符串方法合集

本专题整合了Java截取字符串方法汇总,阅读专题下面的文章了解更多详细操作教程。

1

2026.02.05

java 抽象方法
java 抽象方法

本专题整合了java抽象方法定义、作用教程等内容,阅读专题下面的文章了解更多详细内容。

2

2026.02.05

Eclipse创建jsp文件教程合集
Eclipse创建jsp文件教程合集

本专题整合了Eclipse创建jsp文件、创建jsp项目等等内容,阅读专题下面的文章了解更多详细教程。

26

2026.02.05

java 字符串转数字
java 字符串转数字

本专题整合了java如何字符串转数字相关内容,阅读专题下面的文章了解更多详细教程。

4

2026.02.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Node.js 教程
Node.js 教程

共57课时 | 10.4万人学习

Vue 教程
Vue 教程

共42课时 | 7.9万人学习

Go 教程
Go 教程

共32课时 | 4.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号