jQueryで動きを出している画像が、display:noneを指定しても消えない。

Question

前提・実現したいこと

サイト上に、ふわっと切り替わるような複数枚の画像を配置したいと思っています。
pcサイズ用の画像とspサイズ用の画像を用意していて、画面の幅に合わせて片方の表示を消したいと思っているのですが、display:none;を指定しても消えてくれずに困っています。
どなたか、お力添え頂けますと幸いです…。

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

画面幅549px以上でpcサイズの画像を、それ以下でspサイズの画像を表示したいのですが、両方とも表示されてしまいます。

該当のソースコード

      <div class="pc_top_image">
            <div class="img-wrap">
                <img src="images/peco-top/top_image.png">
                <img src="images/peco-top/top_image3.png">
                <img src="images/peco-top/top_image2.png">

            </div>
        </div>

<!--上記がpcサイズで表示させたい画像です-->

        <div class="sp_top_image">
            <div class="img-wrap">
                <img src="images/peco-top/sp_top_image.png">
                <img src="images/peco-top/sp_top_image2.png">
                <img src="images/peco-top/sp_top_image2.png">
            </div>
        </div>

<!--上記がspサイズで表示させたい画像です-->

    .pc_top_image {
            @media (max-width: 549px) {
            display:none;
        }
         .img-wrap {
    margin-bottom:52%;
    width: 100%;
    position: relative;
      
    img {
    width:100%;
    position: absolute;
}
        }
    }

    .sp_top_image {
            vertical-align: top;
             @media (min-width: 549px) {
            display:none;
        }
         .img-wrap {
   
    margin-bottom:129%;
    width: 100%;
    position: relative;
    
    img {
    width:100%;
    position: absolute;
}
        }
}

<script>
        $('.img-wrap img:nth-child(n+2)').hide();
        setInterval(function() {
            $(".img-wrap img:first-child").fadeOut(4000);
            $(".img-wrap img:nth-child(2)").fadeIn(4000);
            $(".img-wrap img:first-child").appendTo(".img-wrap");
        }, 5000);
    </script>

Answer 1

こんにちは。

以下のようにしてみてはどうでしょうか。
現状のコードだと、非表示の画像もappendTo()で移動してきます。

        $('.img-wrap:visible img:nth-child(n+2)').hide();
        setInterval(function() {
            $(".img-wrap:visible img:first-child").fadeOut(4000);
            $(".img-wrap:visible img:nth-child(2)").fadeIn(4000);
            $(".img-wrap:visible img:first-child").appendTo(".img-wrap:visible");
        }, 5000);

Comments

[yonepi]

Lhankor_Mhyさん、ありがとうございます。
ご提案してくださったコードで解決することができました！

Answer 2

HTMLヘッダにviewportの指定はありますか？
念のため。

Comments

[yonepi]

suamaさん、回答してくださりありがとうございます。
viewportの指定はしてありますが、初心者ゆえ見よう見まねで書いたので、正しく書けてるかは分からないです…。

<meta name="viewport" content="width=device-width, initial-scale=1">

このように記述してあります。