jquery显示与隐藏
jQuery显示与隐藏方法
jQuery提供了多种方法来实现元素的显示与隐藏操作，以下是常用方法及示例：
基础显示与隐藏
使用show()和hide()方法可以控制元素的显示状态：
// 隐藏元素
$("#element").hide();
// 显示元素
$("#element").show();
// 带动画效果的显示/隐藏（毫秒参数）
$("#element").hide(500);
$("#element").show(1000);切换显示状态
toggle()方法可在显示/隐藏状态间切换：
// 切换显示状态
$("#btn").click(function(){
$("#element").toggle();
});
// 带速度参数的切换
$("#element").toggle("slow"); // 可选参数："slow", "fast"或毫秒数淡入淡出效果
使用透明度变化的动画效果：
// 淡出隐藏
$("#element").fadeOut();
// 淡入显示
$("#element").fadeIn();
// 淡入淡出切换
$("#element").fadeToggle(500);滑动效果
垂直方向的展开/收起效果：
// 向上滑动隐藏
$("#element").slideUp();
// 向下滑动显示
$("#element").slideDown();
// 滑动切换
$("#element").slideToggle("fast");回调函数
所有动画方法都支持回调函数：
$("#element").fadeOut(300, function(){
console.log("隐藏完成");
});立即显示/隐藏
通过CSS直接控制（无动画）：
// 相当于hide()
$("#element").css("display", "none");
// 相当于show()
$("#element").css("display", "block");注意事项
- 显示隐藏操作会修改元素的
displayCSS属性 - 动画方法支持速度参数："slow"(600ms), "fast"(200ms)或具体毫秒数
- 隐藏的元素不会被渲染，但仍存在于DOM中
- 对于
visibility: hidden的元素，需使用.css("visibility", "visible")控制
