jquery隐藏显示

jQuery隐藏与显示方法

jQuery提供了多种方法控制元素的隐藏和显示，以下为常用方法及示例：

hide() 和 show()

• hide()：隐藏匹配元素，默认无动画效果。

  $("#element").hide(); // 直接隐藏
  $("#element").hide(1000); // 1秒内渐隐

• show()：显示匹配元素，默认无动画效果。

  $("#element").show(); // 直接显示
  $("#element").show("slow"); // 慢速渐显（"slow"为jQuery预设速度）

toggle()

根据当前状态切换显示/隐藏：

$("#element").toggle(); // 无动画
$("#element").toggle("fast"); // 快速切换（"fast"为预设速度）

淡入淡出效果

• fadeIn() / fadeOut()：通过透明度变化实现显示/隐藏。

  $("#element").fadeIn(500); // 500毫秒淡入
  $("#element").fadeOut(); // 默认400毫秒淡出

• fadeToggle()：切换淡入淡出状态。

  $("#element").fadeToggle("slow");

滑动效果

• slideDown() / slideUp()：通过高度变化实现显示/隐藏。

  $("#element").slideDown(300); // 300毫秒下滑展开
  $("#element").slideUp(); // 默认400毫秒上滑收起

• slideToggle()：切换滑动状态。

  $("#element").slideToggle();

自定义动画

使用 animate() 实现更复杂效果：

$("#element").animate({ 
  opacity: 0, 
  height: "toggle" 
}, 1000); // 1秒内渐变并调整高度

注意事项

• 所有动画方法支持回调函数，动画完成后触发：

  $("#element").fadeOut(500, function() {
    console.log("隐藏完成");
  });

• 可通过 stop() 中断当前动画：

  $("#element").stop().hide();

实际使用时需根据场景选择合适方法，结合CSS或回调函数可实现更复杂交互效果。