Why doesn't the jq,css () method modify left take effect?

1 A small problem I encountered when I was doing the rotation exercise. My idea was to put an element of copy on the last side, then rotate to the last element, and then pull the whole element back to its original position. When I set css, I found that I couldn"t change the value of left

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body,
            html,
            ul,
            li {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            img {
                display: block;
                width: 500px;
                height: 200px;
            }
            
            .clearfix:after {
                content: "";
                display: block;
                clear: both;
            }
            
            -sharpwrap .round li {
                float: left;
            }
            
            -sharpwrap {
                position: relative;
            }
            
            -sharpwrap .left,
            .right {
                width: 30px;
                height: 30px;
                border-radius: 30px;
                border: 1px solid -sharpfff;
                line-height: 30px;
                text-align: center;
                cursor: pointer;
                position: absolute;
                top: 50%;
                margin-top: -15px;
                color: -sharpfff;
            }
            
            -sharpwrap .left:hover,
            .right:hover {
                background-color: -sharpccc;
            }
            
            .left {
                left: 10px;
            }
            
            .right {
                right: 10px;
            }
            
            -sharpwrap .round {
                position: absolute;
                left: 0;
            }
            
            -sharpwrap .list {
                position: absolute;
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%);
            }
            
            -sharpwrap .list>li {
                width: 40px;
                height: 10px;
                border: 1px solid -sharpccc;
                border-radius: 7px;
                margin-left: 10px;
                float: left;
                cursor: pointer;
            }
            
            .color {
                background-color: -sharpfff;
            }
            
            .kl {
                left: 0;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>

    <body>
        <div id="wrap">
            <ul class="round">
                <li>
                    <img src="https://img.codeshelper.com/upload/img/2021/02/28/3hqbjxaauar1086.jpg" />
                </li>
                <li>
                    <img src="https://img.codeshelper.com/upload/img/2021/02/28/plyc1hjj04b1087.jpg" />
                </li>
                <li>
                    <img src="https://img.codeshelper.com/upload/img/2021/02/28/w3lzu3rjvaz1088.jpg" />
                </li>
                <li>
                    <img src="https://img.codeshelper.com/upload/img/2021/02/28/mk4ov3yh10t1089.jpg" />
                </li>
            </ul>
            <div class="left">
                <</div>
                    <div class="right">></div>
                    <ul class="list">
                        <li class="color"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
            </div>
            <script type="text/javascript">
                var $wrap = $("-sharpwrap");
                var clonfirstli = $(".round li").first().clone();
                $(".round").append(clonfirstli);
                var $li = $(".round li");
                var oul = $(".round");
                var hei = $li.first().height();
                var firtli = $li.first().width();
                var $list = $(".list > li");
                var ll = firtli + "";
                var len = ($li.first().width()) * ($li.length);
                var num = 0;
                var k = 0;
                var $btncheck = $("-sharpwrap").find("div");
                $wrap.css({
                    "width": firtli,
                    "height": hei
                })
                $(".round").css({
                    "width": len
                })
                $btncheck.on("click", function(e) {
                    kPP;
                    numPP;
                    $list.removeClass("color");
                    $list.eq(k).addClass("color");
                    oul.animate({
                        "left": "-=" + ll
                    })

                    if(k === ($list.length)) {
                        k = 0;
                        $list.removeClass("color");
                        $list.eq(k).addClass("color");
                    }
                    if(num === 4) {
                         console.log(1);
                        oul.css("left","0px")  //
                    }
                })
            </script>
    </body>

</html>

-- a..animate if(num === 4) { console.log(1); //oul.css('left','0px'); // oul.animate({ 'left': '0'}); } b..css .animate.stop().css if(num === 4) { console.log(1); //oul.css('left','0px'); // //oul.animate({ 'left': '0'}); oul.stop().css("left",'0'); }