本文主要介绍了jquery控制元素隐藏和显示的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧，希望能帮助到大家。
1、jQuery隐藏和显示效果
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
$("#hide").click(function(){ $("p").hide();}); //点击id="hide"元素时，隐藏所有标签内容；$("#show").click(function(){ $("p").show();}); //点击id="show"元素时，显示所有
标签内容；
登录后复制
2、jQuery淡入淡出效果
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
//jQuery fadeIn() 用于淡入已隐藏的元素；$(selector).fadeIn(speed,callback);//speed(可选)参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒；//callback(可选) 参数是 fading 完成后所执行的函数名称；$("button").click(function(){ $("#p1").fadeIn(); $("#p2").fadeIn("slow"); $("#p3").fadeIn(3000);}); //点击
登录后复制
3、jQuery滑动效果
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
slideDown()
slideUp()
slideToggle()
//jQuery slideDown() 方法用于向下滑动元素；$(selector).slideDown(speed,callback);//speed(可选)参数规定效果的时长，它可以取以下值："slow"、"fast" 或毫秒；//callback(可选)参数是滑动完成后所执行的函数名称；$("#flip").click(function(){ $("#panel").slideDown();}); //点击id为flip的元素时，将id为panel的元素向下滑动；//jQuery slideUp() 方法用于向上滑动元素；$(selector).slideUp(speed,callback);//speed(可选)参数规定效果的时长，它可以取以下值："slow"、"fast" 或毫秒；//callback(可选)参数是滑动完成后所执行的函数名称；$("#flip").click(function(){ $("#panel").slideUp();}); //点击id为flip的元素时，将id为panel的元素向上滑动；//jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换；//如果元素向下滑动，则 slideToggle() 可向上滑动它们；//如果元素向上滑动，则 slideToggle() 可向下滑动它们；$(selector).slideToggle(speed,callback);//speed(可选)参数规定效果的时长，它可以取以下值："slow"、"fast" 或毫秒；//callback(可选)参数是滑动完成后所执行的函数名称；$("#flip").click(function(){ $("#panel").slideToggle();}); //点击id为flip的元素时，将id为panel的元素向上或向下滑动；
登录后复制
相关推荐：
详解Html元素隐藏的几种方式
页面元素绑定jquery toggle后元素隐藏的解决方法_jquery
Html 元素隐藏的几种方式_HTML/Xhtml_网页制作
以上就是jQuery控制元素隐藏和显示实例分享的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2789398.html
