使用jQuery动画函数—-显示隐藏元素
css:
<style>
*{margin:0; padding:0;}
#target{
border-radius:10px;
background:#eee;
}
</style>
html:
<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>
</body>
js:
<script>
$('#btn1').click(e=>{
$("#target").animate({
height:'toggle',
border:'toggle',
opacity:'toggle'
},1000,()=>{
console.log("动画结束");
})
});
</script>