<style>
*{margin:0; padding:0;}
#target{
border-radius:10px;
background:#eee;
}
.fade{/*动画起始状态*/
height:104px; width:970px; opacity:1;
padding: 10px;
border: 1px solid #aaa;
overflow:hidden;
}
.out{/*动画结束状态*/
}
</style>
</head>
<body>
<h1>jQuery动画函数——显示隐藏动画</h1>
<button id="btn1">显示/隐藏div</button>
<div id="target">
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis animi sint iste sequi sunt ad excepturi error labore molestiae est expedita eos nisi placeat provident dolorem quos facilis! Sapiente!</span><span>Accusamus neque id reprehenderit! Voluptatem in deleniti laboriosam commodi facere magnam impedit minima corrupti distinctio culpa amet optio natus esse. Inventore incidunt ab id perspiciatis atque minus magnam tempore harum.</span></p>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
$("#btn1").click(function(){
//这个this代表btn1
console.log($(this));
$("#target").animate({
opacity:0
},2000,function(){
//回调函数，在动画执行完后执行的代码
//这个this代表target
console.log($(this));
$(this).hide();
});
$("#target").click(function(){
alert("疼");
})
//.toggle(3000)
//.slideToggle(3000)
//.fadeToggle(3000)
//为动画函数添加回调函数，输出"动画结束"
});
</script>
</body>
