JQuery实现DIV其他动画效果的简单实例

高洛峰

发布时间：2016-12-28 10:38:07

1203人浏览过

来源于php中文网

原创

1.toggle

切换对象的隐藏和显示，可以用来代替show和hide





无标题文档






1

2.fadeIn fadeOut

fadeIn 淡入（本来是隐藏的），fadeOut 淡出（本来是显示的）

fadeOut

淡出的时候这一块的空间就会被隐藏而下方的模块会往上移动





无标题文档

fadeIn





无标题文档

3.fadeTo

切换到一个指定的透明度：0表示彻底透明，1表示不透明。





无标题文档

4.slideUp和slideDown

奥硕企业网站管理系统3.0.2

临沂奥硕软件有限公司拥有国内一流的企业网站管理系统，奥硕企业网站管理系统真正会打字就会建站的管理系统，其强大的扩展性可以满足企业网站实现各种功能（唯一集成3O多套模版的企业建站系统）奥硕企业网站管理系统具有一下特色功能1、双语双模（中英文采用单独模板设计，可制作中英文不同样式的网站）2、在线编辑JS动态菜单支持下拉效果，同时生成中文，英文，静态3个JS菜单3、在线制作并调用FLASH展示动画4、自

下载

slideUp：向上滑动隐藏对象

slideDown:向下滑动显示对象（说明本来是隐藏的）

slideUp





无标题文档

slideDown





无标题文档

5.slideToggle

滑动实现对象的隐藏与显示切换





无标题文档

以上这篇JQuery实现DIV其他动画效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多JQuery实现DIV其他动画效果的简单实例相关文章请关注PHP中文网！

javascript动画如何制作_有哪些实现动画的方法【教程】

如何使用 jQuery 动态修改 div 的背景颜色

如何让元素每次进入视口时都从头开始执行动画

实现两级联动下拉菜单并确保表单能同时提交分类ID与子分类ID

HTML 下拉联动：基于主选项动态筛选子选项并保留 value 值用于表单提交

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：通过jquery实现页面的动画效果(实例代码) 下一篇：利用jQuery的动画函数animate实现豌豆发射效果

作者最新文章

实现一个 Java 版的 Redis

2018-05-30 13:56

Asp.net使用SignalR实现发送图片

2018-05-28 16:22

HTML5:使用Canvas实时处理Video

2018-05-28 17:58

最简单的微信小程序Demo

2018-05-30 10:20

Python构造自定义方法来美化字典结构输出

2018-05-29 10:33

html设置加粗、倾斜、下划线、删除线等字体效果示例介绍

2018-05-31 09:48

微信小程序：如何实现tabs选项卡效果示例

2018-05-29 15:01

微信小程序开发教程-App()和Page()函数概述

2018-05-28 16:19

python中pandas.DataFrame（创建、索引、增添与删除）的简单操作方法介绍

2018-05-29 15:23

详解python redis使用方法

2018-05-28 15:01

热门AI工具

DeepSeek

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

AI 编程开发 AI 聊天问答

豆包大模型

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

AI 编程开发 AI大模型

通义千问

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

AI 编程开发 Agent智能体

腾讯元宝

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

文档处理 AI 聊天问答

文心一言

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

AI 编程开发 AI 文本写作

讯飞写作

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

AI 文本写作中文写作

即梦AI

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

图片拼接

ChatGPT

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

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

Python 序列化

本专题整合了python序列化、反序列化相关内容，阅读专题下面的文章了解更多详细内容。

2026.02.02

AO3官网入口与中文阅读设置 AO3网页版使用与访问

本专题围绕 Archive of Our Own（AO3）官网入口展开，系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法，并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程，帮助用户稳定访问 AO3 官网，高效完成中文阅读与作品浏览。

2026.02.02

主流快递单号查询入口实时物流进度一站式追踪专题

本专题聚合极兔快递、京东快递、中通快递、圆通快递、韵达快递等主流物流平台的单号查询与运单追踪内容，重点解决单号查询、手机号查物流、官网入口直达、包裹进度实时追踪等高频问题，帮助用户快速获取最新物流状态，提升查件效率与使用体验。

2026.02.02

Golang WebAssembly（WASM）开发入门

本专题系统讲解 Golang 在 WebAssembly（WASM）开发中的实践方法，涵盖 WASM 基础原理、Go 编译到 WASM 的流程、与 JavaScript 的交互方式、性能与体积优化，以及典型应用场景（如前端计算、跨平台模块）。帮助开发者掌握 Go 在新一代 Web 技术栈中的应用能力。

2026.02.02