0

0

jQuery操作之效果详解

巴扎黑

巴扎黑

发布时间:2017-06-30 13:52:23

|

1153人浏览过

|

来源于php中文网

原创

jquery效果操作一共分五类:1.基本,2.滑动,3.淡入淡出,4.自定义,5.设置。本文将对此详细介绍。具有很好的参考价值。下面跟着小编一起来看下吧

效果操作一共分五类:1.基本,2.滑动,3.淡入淡出,4.自定义,5.设置

show(),hide(),toggle()

代码如下:

html代码:


 

Hello

jQuery代码:

        $("p").show();  

        开始P是隐藏的,执行完这行代码,P显示

        $("p").hide();  

        现在的P标签是显示的,执行完这行代码P隐藏


 $("#btn1").click(function(){
  $("p").toggle("show");
 })

按钮绑定一个click事件,当P是现实的时候让它隐藏,如果P是隐藏的,那就让它显示

注释:show(),显示隐藏的匹配元素。

          hide(),隐藏显示的元素。

         toggle(),用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

slideDown(),slideUp(),slideToggle()

代码如下:

html代码:


 

亿众购物系统
亿众购物系统

一套设计完善、高效的web商城解决方案,独有SQL注入防范、对非法操作者锁定IP及记录功能,完整详细的记录了非法操作情况,管理员可以随时查看网站安全日志以及解除系统自动锁定的IP等前台简介:  1)系统为会员制购物,无限会员级别。  2)会员自动升级、相应级别所享有的折扣不同。  3)产品可在缺货时自动隐藏。  4)自动统计所有分类中商品数量,并在商品分类后面显示。  5)邮件列表功能,可在线订阅

下载

jQuery代码:


 $("#btn1").click(function(){
  $("p").slideDown();
 });
  给id为btn1的按钮绑定click事件,当点击展开按钮的时候,p向下展开。

 $("#btn2").click(function(){
  $("p").slideUp();
 });
  给id为btn2的按钮绑定click事件,当点击展开按钮的时候,p向上收缩。

 $("#btn3").click(function(){
  $("p").slideToggle();
 });

给id为btn3的按钮绑定click事件,当p是向下展开的时候就向上收缩,反之。

注释:slideDown(),向下展开。

          slideUp(),向上收缩。

          slideToggle(),通过高度变化来切换所有匹配元素的可见性。

效果如下:

fadeIn(),fadeOut(),fadeTo(),fadeToggle()

代码如下:

html代码:


 

jQuery代码:


 $("input").first().click(function(){
  $("p").fadeIn(1000);
 });

用选择器选中第一个input,给它绑定click事件,p开始是隐藏的,它会在一秒钟之内慢慢的显示出来,实现淡入效果。


 $("input").eq(1).click(function(){
  $("p").stop().fadeOut(1000);
  //$("p").fadeOut(1000);
 });

用选择器选中第二个input,给它绑定click事件,p现在是显示的,它会在一秒钟之内慢慢的隐藏,实现淡出效果。


 $("input").eq(2).click(function(){
  $("p").stop().fadeToggle(1000);
 })

用选择器选中第三个input,给它绑定click事件,当p是显示的时候,让它淡出,反之,当p是隐藏的时候,让它淡入。


 $("input").eq(3).click(function(){
  $("p").stop().fadeTo(1000,0.5);
 })

用选择器选中第四个input,给它绑定click事件,设置淡入(淡出)的时间和透明度。

注释:fadeIn(),通过不透明度的变化来实现所有匹配元素的淡入效果。

          fadeOut(),通过不透明度的变化来实现所有匹配元素的淡出效果。

          fadeTo(),把所有匹配元素的不透明度以渐进方式调整到指定的不透明度。

         fadeToggle(),通过不透明度的变化来开关所有匹配元素的淡入和淡出效果。

效果如下:

animate(),stop(),delay()

代码如下:

css代码:


 p{
 width:100px;
 height:100px;
 background:red;
 }

html代码:


 

ST宋泽

jQuery代码:


 $("#btn1").click(function(){
  $("p").delay(2000).animate({
  "width":"300px",
  "height":"300px",
  "font-size":"4em"
  },5000,function(){
  console.log("动画完成")
  })
 });

给id为btn1的按钮绑定click事件,当点击按钮的时候,延迟两秒钟,p的width,height,font-size会

逐渐变成设置的这些值,两秒之后打印 “动画完成”。


 $("#btn2").click(function(){
  $("p").stop();
 })

给id为btn2的按钮绑定click事件,当p正在做动画的时候,点击按钮,动画会停止。

注释:animate(),用于创建自定义动画的函数。

stop(),停止所有在指定元素上正在运行的动画。

delay(),设置一个延时来推迟执行队列中之后的项目。

效果如下:

jQuery.fx.off,jQuery.fx.interval

jQuery.fx.off,关闭页面上所有的动画。

jQuery.fx.interval,设置动画的显示帧速。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

32

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

30

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

33

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

7

2026.01.31

漫画防走失登陆入口大全
漫画防走失登陆入口大全

2026最新漫画防走失登录入口合集,汇总多个稳定可用网址,助你畅享高清无广告漫画阅读体验。阅读专题下面的文章了解更多详细内容。

11

2026.01.31

php多线程怎么实现
php多线程怎么实现

PHP本身不支持原生多线程,但可通过扩展如pthreads、Swoole或结合多进程、协程等方式实现并发处理。阅读专题下面的文章了解更多详细内容。

1

2026.01.31

php如何运行环境
php如何运行环境

本合集详细介绍PHP运行环境的搭建与配置方法,涵盖Windows、Linux及Mac系统下的安装步骤、常见问题及解决方案。阅读专题下面的文章了解更多详细内容。

0

2026.01.31

php环境变量如何设置
php环境变量如何设置

本合集详细讲解PHP环境变量的设置方法,涵盖Windows、Linux及常见服务器环境配置技巧,助你快速掌握环境变量的正确配置。阅读专题下面的文章了解更多详细内容。

0

2026.01.31

php图片如何上传
php图片如何上传

本合集涵盖PHP图片上传的核心方法、安全处理及常见问题解决方案,适合初学者与进阶开发者。阅读专题下面的文章了解更多详细内容。

2

2026.01.31

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 5.2万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 10万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.8万人学习

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

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