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")控制