jQuery动态效果

以下面的这个盒子为例，我设置了它在页面中居中显示，方便观看：

<div id="box"></div>
<script src="jquery-3.4.1.min.js"></script>
<style>
    #box{
        background: #18af75;
        height: 300px;
        width: 300px;
        margin:auto;
        position: absolute;
        top: 250px;
        bottom: 250px;
        left: 250px;
        right: 250px;
    }
</style>

1、隐藏box；

$('#box').hide();

2、显示box;

$('#box').show();

3、加入延迟；

$('#box').delay(1000).hide();   //延迟1秒
$('#box').delay(1000).show();

4、逐渐淡出：

$('#box').fadeOut(1000);   //动画时间1秒

5、逐渐淡入：

$('#box').fadeIn(1000);   //动画时间1秒

6、渐变到特定透明度：

$('#box').fadeTo(1000, 0.5);   //动画时间1秒，透明度变为0.5

7、压缩；

$('#box').slideUp(1000);   //动画时间1秒

8、伸展：

$('#box').slideDown(1000);   //动画时间1秒

9、在压缩动画结束后伸展：

$('#box').slideUp(1000, sideDownAgain);
function sideDownAgain(){
	$('#box').slideDown(1000);
}

10、自定义动画效果：

图像将会变成自己设置的模样。

$('#box').animate({
	top:'50px',
	opacity:'0.5',
	height:'40px',
	width:'370px'
})

11、停止动画：

$('#box').stop();

来源：https://blog.csdn.net/weixin_43207025/article/details/100145470