请问jq怎么使用变量设置css？

要疯了，容我休息会，大哥们帮帮我吧
图片说明

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .scroll{
            position: absolute;
        }
        .one{
            display: flex;
            position: relative;
            overflow: hidden;
            transform:translateX(60px);

        }
        .one:hover{
            cursor: pointer;
        }
        .s{
            width: 404px;
            height: 240px;
            display: flex;
            margin:10px 10px 10px 0px;
            box-shadow:0px 0px 8px rgb(187, 182, 182);
            border-radius: 15px;
            background-color:aqua
        }
    </style>
</head>
<body>

    <div class="scroll">
        <div class="one" style="left:0">
            <div class="s" style="background-color:aqua"></div>
            <div class="s" style="background-color:rgb(19, 150, 84)"></div>
            <div class="s" style="background-color:rgb(255, 251, 0)"></div>
            <div class="s" style="background-color:rgb(17, 0, 255)"></div>
            <div class="s" style="background-color:rgb(255, 0, 212)"></div>
            <div class="s" style="background-color:rgb(255, 0, 34)"></div>
            <div class="s" style="background-color:rgb(204, 207, 212)"></div>
        </div>
    </div>

</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
    var isMoving=false;
    var  position_down;
    function move(){
        $(".one").mousedown(function(e){
            isMoving=true;
            position_dowm=e;

        });
        $(".one").mousemove(function(e){
            if(isMoving){
                $(this).style.Transform=//"translateX("+e.clientX - startX.clientX+"px)";
                $(this).css("transform","translate("+e.clientX - position_down.clientX+",0px)");
            }
        })
    };
    $(document).ready(function(){
        move();
    }); 


</script>


</html>

参考GPT和自己的思路：

可以使用变量来设置CSS属性值，具体方法如下：

将变量定义在JavaScript代码中，例如：

var color = "red";

然后在需要设置CSS属性的地方使用该变量，例如：

$(".s").css("background-color", color);

这样就会将所有类名为"s"的元素的背景色设置为红色。

在本例中，如果想要使用变量来设置translateX的值，可以先将值定义在JavaScript代码中，例如：

var translateX = "60px";

然后在需要设置该属性的地方使用相应的变量，例如：

$(".one").css("transform", "translateX(" + translateX + ")");

这样就会将类名为"one"的元素向右平移60个像素。

另外，在代码中有一个错误：

$(this).style.Transform=//"translateX("+e.clientX - startX.clientX+"px)";

应该改为：

$(this).css("transform", "translateX(" + (e.clientX - position_down.clientX) + "px)");

注意需要使用括号将e.clientX和position_down.clientX的差值括起来。