// Html部分
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div>
</div>
// CSS部分
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background: red;
display: none;
}
// JS部分
$(function(){
$("button").eq(0).click(function(){
// $("div").css("display","block")
$("div").show(1000,function(){
// 作用:动画执行完毕之后调用
alert("显示动画执行完毕")
}) // 一秒钟完成显示
})
$("button").eq(1).click(function(){
// $("div").css("display","none")
$("div").hide(1000)
})
$("button").eq(2).click(function(){
$("div").toggle(1000)
})
})
效果如下:
点击显示红色方块显示
点击隐藏红色方块隐藏
点击切换两种状态切换