jQueryでエラーなしで作動もしない

Question

前提

jQueryでwebサイトの模写コーディングをしています。
関数宣言での処理を書いたのですがエラーもなしで動きもしません。

実現したいこと

$(".slide-box")をスライドショーのように一定時間ごとに切り替えたい

発生している問題・エラーメッセージ

特になし

該当のソースコード

$(function(){
$(".slide-box").animate({
transform: "translateX(-1008px)"
}, 5000 , "swing").animate({
transform: "translateX(-2016px)"
}, 5000 , "swing").animate({
transform: "translateX(-3024px)"
}, 5000 , "swing").animate({
transform: "translateX(-4032px)"
}, 5000 , "swing").animate({
transform: "translateX(-5040px)"
}, 5000 , "swing").animate({
transform: "translateX(-6048px)"
}, 5000 , "swing").animate({
transform: "translateX(-7056px)"
}, 5000 , "swing");
});

<ul class="slide-box"> <li> <a href="#"> <img src="img/video/attention-box/main_img01.jpeg"> </a> </li> <li> <a href="#"> <img src="img/video/attention-box/SUV_LINEUP_2100_1000+.jpeg"> </a> </li> <li> <a href="#"> <img src="img/video/attention-box/thanksdays_2100px-1000px.jpeg"> </a> </li> <li> <a href="#"> <img src="img/video/attention-box/2022_08_18_CX30_2100px-1000px.jpeg"> </a> </li> <li> <a href="#"> <img src="img/video/attention-box//2204_cx-5_2100px-1000px.jpeg"> </a> </li> <li> <a href="#"> <img src="img/video/attention-box/CX60_2100px-1000px_0914.jpeg"> </a> </li> <li> <a href="#"> <img src="img/video/attention-box/M_HYBRID_2100px-1000px.jpeg"> </a> </li> </ul>

& ul {
width: 700%;
height: 100%;
display: flex;

        &.slide-box {
          transform: translateX(0px);
        }

        li {
            width: 100%;
            height: 100%;

            & a {
                display: block;
                width: 100%;
                height: 100%;

                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
    }

試したこと

関数宣言が正常に機能しているかを
alert(ok!)
でチェックした（正常に作動）

補足情報（FW/ツールのバージョンなど）

現在使っているバージョン

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Answer 1

transformはanimateではなくcssで指定してください

<script>
$(function(){
  $(".slide-box").css({transform: "translateX(100px)"})
  .delay(1000).queue(function(){$(this).css({transform: "translateX(0px)"}).dequeue();})
  .delay(1000).queue(function(){$(this).css({transform: "translateX(100px)"}).dequeue();})
  .delay(1000).queue(function(){$(this).css({transform: "translateX(0px)"}).dequeue();})
});
</script>
<style>
.slide-box{
  transition: transform 1s linear; 
}
</style>
<ul class="slide-box">
<li><a href="#"><img src="#" alt="1"></a></li>
<li><a href="#"><img src="#" alt="2"></a></li>
<li><a href="#"><img src="#" alt="3"></a></li>
</ul>

Comments

[gundamrx-0]

解決できました！
ご教授いただきありがとうございました！！