用jq写百叶窗

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            width: 800px;
            height: 300px;
            margin: 80px auto;
            position: relative;
            border: 1px solid white;
            overflow: hidden;
        }
        
        .container ul {
            list-style: none;
        }
        
        .container ul li {
            position: absolute;
        }
        
        .cover {
            width: 100%;
            height: 300px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
        }
        
        .li1 {
            left: 160px;
        }
        
        .li2 {
            left: 320px;
        }
        
        .li3 {
            left: 480px;
        }
        
        .li4 {
            left: 640px;
        }
    </style>

 <div class="container">
        <ul>
            <li class="li0">
                <div class="cover"></div><img src="./images/dog/0.jpg" alt=""></li>
            <li class="li1">
                <div class="cover"></div><img src="./images/dog/1.jpg" alt=""></li>
            <li class="li2">
                <div class="cover"></div><img src="./images/dog/2.jpg" alt=""></li>
            <li class="li3">
                <div class="cover"></div><img src="./images/dog/3.jpg" alt=""></li>
            <li class="li4">
                <div class="cover"></div><img src="./images/dog/4.jpg" alt=""></li>
        </ul>
    </div>

<script>
        var $lis = $(".container ul li");
        // console.log($lis);
        $lis.mouseenter(function() {
            $(this).find(".cover").stop(true).fadeOut()
        }).mouseleave(function() {
            // $(this).stop(true)
            $lis.stop(true);
            console.log(this);
            $(this).find(".cover").stop(true).fadeIn();
            $lis.eq(1).animate({
                'left': 160
            }, 500)
            $lis.eq(2).animate({
                'left': 320
            }, 500)
            $lis.eq(3).animate({
                'left': 480
            }, 500)
            $lis.eq(4).animate({
                'left': 640
            }, 500)

        })
        $(".li0").mouseenter(function() {
            $lis.stop(true);
            $lis.eq(1).animate({
                'left': 560
            }, 500)
            $lis.eq(2).animate({
                'left': 620
            }, 500)
            $lis.eq(3).animate({
                'left': 680
            }, 500)
            $lis.eq(4).animate({
                'left': 740
            }, 500)
        })
        $(".li1").mouseenter(function() {
            $lis.stop(true);
            $lis.eq(1).animate({
                'left': 60
            }, 500)
            $lis.eq(2).animate({
                'left': 620
            }, 500)
            $lis.eq(3).animate({
                'left': 680
            }, 500)
            $lis.eq(4).animate({
                'left': 740
            }, 500)
        })
        $(".li2").mouseenter(function() {
            $lis.stop(true);
            $lis.eq(1).animate({
                'left': 60
            }, 500)
            $lis.eq(2).animate({
                'left': 120
            }, 500)
            $lis.eq(3).animate({
                'left': 680
            }, 500)
            $lis.eq(4).animate({
                'left': 740
            }, 500)
        })
        $(".li3").mouseenter(function() {
            $lis.stop(true);
            $lis.eq(1).animate({
                'left': 60
            }, 500)
            $lis.eq(2).animate({
                'left': 120
            }, 500)
            $lis.eq(3).animate({
                'left': 180
            }, 500)
            $lis.eq(4).animate({
                'left': 740
            }, 500)
        })
        $(".li4").mouseenter(function() {
            $lis.stop(true);
            $lis.eq(1).animate({
                'left': 60
            }, 500)
            $lis.eq(2).animate({
                'left': 120
            }, 500)
            $lis.eq(3).animate({
                'left': 180
            }, 500)
            $lis.eq(4).animate({
                'left': 240
            }, 500)
        })
    </script>