jQuery用animate()方法实现简单动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq动态效果animate()</title>
    <link rel="stylesheet" href="public/index.css">
</head>
<body>
<div class="contant">
    <div class="contant-img">
        <div class="img-a">
            <a href=""><img src="public/imgs/big-xmg.jpg" alt=""></a>
        </div>

        <div class="img-b">
            <a href=""><img src="public/imgs/small-xmg.jpg" alt=""></a>
        </div>
    </div>
    <div class="contant-close">x</div>
</div>



<!--js-->
<script src="public/jquery-1.12.4.min.js"></script>
<script src="public/index.js"></script>

</body>
</html>

css样式:

<style>

*{
    margin: 0;
    padding: 0;
}
.contant{
    min-width: 1200px;
    position: relative;
    height: 0px;
    /*height: 150px;*/
    /*height: 450px;*/
    border: 1px solid red;
    box-sizing: border-box;
    overflow: hidden;
    /*display: none;*/
}
.contant .contant-img{
    width: 100%;
}
.contant .contant-img .img-a{
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    z-index: 0;
}
.contant .contant-img .img-b{
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    z-index: -1;
}
.contant-close{
    font-size: 27px;
    color: aliceblue;
    position: absolute;
    top: 10px;
    right: 30px;
    z-index: 2;
    cursor: pointer;
}

</style>

js代码

$(function () {
   // 动画效果方法 一
/*    $(".contant").slideDown(2000, function () {
        $(this).slideUp(2000,function () {
            $(this).css({display:"block",height:"150px"});
            $(this).find(".img-b").css("z-index","1");
        })
    });*/


/*
    测试其他
    $(".contant").animate({
        left:'250px',
        opacity:'0.5',
        height:'150px',
        width:'150px'
    });*/


    //折叠动画方法二
    $(".contant").animate({height:"450px"},3000).delay(1000)
        .animate({height:"150px"},1000,function () {
            $(this).find(".img-b").css("z-index","1");
        });

    //关闭
    $(".contant-close").click(function () {
        $(".contant").css({display:"none"})
    });


});

</script>

jQuery用animate()方法实现简单动画效果

猜你喜欢