分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

jQuery 学习02——效果:隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

发布时间:2023-09-06 01:07责任编辑:蔡小小关键词:jQuery动画

jQuery 效果- 隐藏hide()和显示show()

语法:

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
(可选)speed  参数:规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
(可选)callback 参数:是隐藏或显示完成后所执行的函数名称。
 
 
例1:使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
<script>$(document).ready(function(){ ?$("#hide").click(function(){ ???$("p").hide(); ?}); ?$("#show").click(function(){ ???$("p").show(); ?});});</script><body> ?<p>如果你点击“隐藏” 按钮,我将会消失。</p> ?<button id="hide">隐藏</button> ?<button id="show">显示</button></body>

例2:演示带有 speed 参数的 hide()和show()方法:

<script>$(document).ready(function(){ ?$("#hide").click(function(){ ???$("p").hide(1000); ?}); ?$("#show").click(function(){ ???$("p").show(1000); ?});});</script><body><button id="hide">隐藏</button><button id="show">显示</button><p>这是个段落,内容比较少。</p><p>这是另外一个小段落</p></body>

toggle() 方法:来切换 hide() 和 show() 方法

例3:显示被隐藏的元素,并隐藏已显示的元素:

<script>$(document).ready(function(){ ?$("button").click(function(){ ???$("p").toggle(); ?});});</script><body><button>隐藏/显示</button><p>这是一个文本段落。</p><p>这是另外一个文本段落。</p></body>

jQuery 效果 - 淡入jQuery fadeIn() 淡出fadeOut()

jQuery 学习02——效果:隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

原文地址:http://www.cnblogs.com/wuss/p/7452736.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved