jquery控制div显示隐藏

使用jQuery控制div显示隐藏的方法

基本显示与隐藏

通过show()和hide()方法实现最基础的显示隐藏控制：

$("#targetDiv").show(); // 显示元素
$("#targetDiv").hide(); // 隐藏元素

切换显示状态

使用toggle()方法在显示/隐藏状态间切换：

$("#toggleButton").click(function(){
    $("#targetDiv").toggle(); // 每次点击切换状态
});

添加动画效果

通过参数控制显示隐藏的动画时长和效果：

$("#targetDiv").hide(1000); // 1秒内渐隐
$("#targetDiv").show("slow"); // 慢速显示
$("#targetDiv").toggle(500); // 0.5秒动画切换

淡入淡出效果

使用透明度变化的动画方式：

$("#targetDiv").fadeIn();  // 淡入显示
$("#targetDiv").fadeOut(); // 淡出隐藏
$("#targetDiv").fadeToggle(); // 淡入淡出切换

滑动效果

垂直方向展开/收起的效果：

$("#targetDiv").slideDown(); // 向下滑动显示
$("#targetDiv").slideUp();   // 向上滑动隐藏
$("#targetDiv").slideToggle(); // 滑动切换

回调函数

动画完成后执行指定函数：

$("#targetDiv").hide(500, function(){
    alert("隐藏完成");
});

通过CSS控制

直接修改CSS的display属性：

$("#targetDiv").css("display", "none"); // 隐藏
$("#targetDiv").css("display", "block"); // 显示

检查可见状态

判断元素当前是否可见：

if($("#targetDiv").is(":visible")){
    // 元素可见时的操作
}

链式操作

多个动画效果连续执行：

$("#targetDiv")
    .slideUp(300)
    .delay(500)
    .fadeIn(400);