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);
